diff --git a/main/inc/lib/display.lib.php b/main/inc/lib/display.lib.php
index 0b0e2bcae4..0dc47942a8 100755
--- a/main/inc/lib/display.lib.php
+++ b/main/inc/lib/display.lib.php
@@ -2910,6 +2910,17 @@ HTML;
$videoPluginCssFiles .= '{type: "stylesheet", src: "'.$webJsPath.$file.'"},';
}
+ if ($renderers = api_get_configuration_sub_value('video_player_renderers/renderers')) {
+ foreach ($renderers as $renderName) {
+ if ('youtube' === $renderName) {
+ continue;
+ }
+
+ $file = $webPublicPath."assets/mediaelement/build/renderers/$renderName.min.js";
+ $videoPluginFiles .= '{type: "script", src: "'.$file.'"},';
+ }
+ }
+
$translateHtml = '';
$translate = api_get_configuration_value('translate_html');
if ($translate) {
diff --git a/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/dialogs/qmarkersrolls.js b/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/dialogs/qmarkersrolls.js
index bee95ff4fc..8453e051b0 100644
--- a/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/dialogs/qmarkersrolls.js
+++ b/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/dialogs/qmarkersrolls.js
@@ -16,12 +16,12 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
currentMarkers = [],
colorDialog = editor.plugins.colordialog;
- function initPlayer(selectedElement) {
- fakeImage = selectedElement;
+ function initPlayer(dialog) {
+ fakeImage = dialog.getSelectedElement();
if (!fakeImage ||
!fakeImage.data( 'cke-real-element-type' ) ||
- fakeImage.data( 'cke-real-element-type' ) != 'video'
+ 'video' !== fakeImage.data('cke-real-element-type')
) {
return;
}
@@ -32,10 +32,10 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
if (sourcesList.count() === 0) {
sourcesList = videoNode.getElementsByTag('source', 'cke');
- }
- if (sourcesList.count() === 0) {
- return;
+ if (sourcesList.count() === 0) {
+ return;
+ }
}
var sourceNode = sourcesList.getItem(0);
@@ -44,35 +44,57 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
return;
}
- pgbProgress = document.getElementById('ck-qmr-progress');
- pgbProgress.value = 0;
- pgbProgress.min = 0;
- pgbProgress.step = 1;
- pgbProgress.onchange = function () {
- player.currentTime = this.value;
-
- document.getElementById('ck-qmr-current-time').textContent = encodeTime(this.value);
- };
-
- var playerContainer = document.getElementById('ck-qmr-player-container');
- playerContainer.innerHTML = '';
-
- player = document.createElement('video');
- player.className = 'skip';
- player.controls = false;
- player.style.maxWidth = '100%';
- player.style.minWidth = '100%';
- player.onloadedmetadata = function () {
- pgbProgress.max = Math.floor(player.duration);
- playerContainer.appendChild(player);
- };
- player.src = sourceNode.getAttribute('src');
+ pgbProgress = CKEDITOR.document.getById('ck-qmr-progress');
+ pgbProgress.setAttributes({value: 0});
+ pgbProgress.on('change', function () {
+ var value = pgbProgress.getValue()
+
+ player.$.currentTime = value;
+ dialog.setValueOf('tab-markers', 'txt-hms', encodeTime(value));
+ });
+ pgbProgress.hide();
+
+ var playerContainer = CKEDITOR.document.getById('ck-qmr-player-container');
+ playerContainer.setHtml('');
+ playerContainer.hide();
+
+ var sourceType = sourceNode.getAttribute('type');
+
+ var embedVideoTypes = [
+ 'video/dailymotion',
+ 'video/facebook',
+ 'video/twitch',
+ 'video/vimeo',
+ 'video/youtube',
+ ];
+
+ var isEmbedVideo = -1 !== CKEDITOR.tools.indexOf(embedVideoTypes, sourceType);
+
+ if (isEmbedVideo) {
+ playerContainer.setText(lang.embedVideoSource + ' ' + sourceNode.getAttribute('src'));
+ playerContainer.show();
+ } else {
+ player = new CKEDITOR.dom.element('video');
+ player.setAttributes({
+ 'class': 'skip',
+ src: sourceNode.getAttribute('src')
+ });
+ player.removeAttribute('controls');
+ player.setStyles({ maxWidth: '100%', maxHeight: '100%' });
+ player.on('loadedmetadata', function () {
+ pgbProgress.setAttribute('max', Math.floor(player.$.duration));
+ pgbProgress.show();
+
+ playerContainer.append(player);
+ playerContainer.show();
+ });
+ }
}
- function decodeTime(time) {
- var parts = time.split(':');
+ function decodeTime(tms) {
+ var parts = tms.split(':');
- if (parts.length != 3) {
+ if (3 !== parts.length) {
return 0;
}
@@ -221,19 +243,8 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
html: ''
},
{
- type: 'hbox',
- widths: ['100%', '200px'],
- children: [
- {
- type: 'html',
- html: ''
- },
- {
- type: 'html',
- title: 'Current Time',
- html: '00:00:00'
- },
- ]
+ type: 'html',
+ html: ''
},
{
type: 'hbox',
@@ -246,35 +257,50 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
+ 'style="max-height: 110px; overflow: hidden auto; list-style: none;">'
},
{
- type: 'button',
- id: 'btn-assign',
- label: lang.assignQuiz,
- title: lang.assignQuiz,
- onClick: function () {
- var radioQuizzes = document.getElementsByName('ck_qmr_quiz'),
- selected = null;
-
- radioQuizzes.forEach(function (radio) {
- if (!radio.checked) {
- return;
+ type: 'vbox',
+ children: [
+ {
+ type: 'text',
+ id: 'txt-hms',
+ label: lang.time,
+ 'default': '00:00:00'
+ },
+ {
+ type: 'button',
+ id: 'btn-assign',
+ label: lang.assignQuiz,
+ title: lang.assignQuiz,
+ onClick: function () {
+ var radioQuizzes = document.getElementsByName('ck_qmr_quiz'),
+ selected = null;
+
+ radioQuizzes.forEach(function (radio) {
+ if (!radio.checked) {
+ return;
+ }
+
+ selected = radio;
+ });
+
+ if (!selected) {
+ return;
+ }
+
+ var tms = this.getDialog()
+ .getContentElement('tab-markers', 'txt-hms')
+ .getValue();
+
+ currentMarkers.push([
+ decodeTime(tms),
+ parseInt(selected.value)
+ ]);
+
+ displayCurrentMarkersList();
+
+ selected.parentElement.remove();
}
-
- selected = radio;
- });
-
- if (!selected) {
- return;
- }
-
- currentMarkers.push([
- parseInt(pgbProgress.value),
- parseInt(selected.value)
- ]);
-
- displayCurrentMarkersList();
-
- selected.parentElement.remove();
- }
+ },
+ ]
}
]
},
@@ -344,9 +370,7 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
document.getElementById('ck-qmr-quizzes-container').innerHTML = '';
- initPlayer(
- dialog.getSelectedElement()
- );
+ initPlayer(dialog);
currentMarkers = JSON.parse(
videoNode.getAttribute('data-q-markersrolls') || '[]'
diff --git a/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/en.js b/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/en.js
index 127f99cd40..2e72e555fc 100644
--- a/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/en.js
+++ b/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/en.js
@@ -15,5 +15,7 @@ CKEDITOR.plugins.setLang('qmarkersrolls', 'en', {
assignQuiz: 'Assign quiz',
currentMarkers: 'Current Markers',
markerColor: 'Marker color',
- choose: 'Choose'
+ choose: 'Choose',
+ time: 'Time',
+ embedVideoSource: 'Embed video source'
});
diff --git a/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/es.js b/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/es.js
index c6a183f167..6144383d3c 100644
--- a/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/es.js
+++ b/main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/es.js
@@ -5,7 +5,6 @@
*
* This plugin allows set quizzes markers in video with mediaelement.
*/
-
CKEDITOR.plugins.setLang('qmarkersrolls', 'es', {
dialogTitle: 'Marcadores de exámenes',
setQuizMarkersRolls: 'Agregar marcadores de exámenes',
@@ -16,5 +15,7 @@ CKEDITOR.plugins.setLang('qmarkersrolls', 'es', {
assignQuiz: 'Asignar examen',
currentMarkers: 'Marcadores actuales',
markerColor: 'Color del marcador',
- choose: 'Elegir'
+ choose: 'Elegir',
+ time: 'Tiempo',
+ embedVideoSource: 'Fuente de video'
});
diff --git a/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js b/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
index 944d495fbe..8b839f48f4 100644
--- a/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
+++ b/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
@@ -313,11 +313,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
label : lang.sourceType,
type : 'select',
'default' : 'video/mp4',
- items :
- [
- [ 'MP4', 'video/mp4' ],
- [ 'WebM', 'video/webm' ]
- ],
+ items : editor.config.videoTypes,
onChange: onChangeSrc,
commit : commitSrc,
setup : loadSrc
@@ -353,11 +349,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
label : lang.sourceType,
type : 'select',
'default':'video/webm',
- items :
- [
- [ 'MP4', 'video/mp4' ],
- [ 'WebM', 'video/webm' ]
- ],
+ items : editor.config.videoTypes,
commit : commitSrc,
setup : loadSrc
}]
diff --git a/main/inc/lib/template.lib.php b/main/inc/lib/template.lib.php
index 56e7e45625..1efa91b2e8 100755
--- a/main/inc/lib/template.lib.php
+++ b/main/inc/lib/template.lib.php
@@ -765,6 +765,16 @@ class Template
'js-cookie/src/js.cookie.js',
];
+ if ($renderers = api_get_configuration_sub_value('video_player_renderers/renderers')) {
+ foreach ($renderers as $renderName) {
+ if ('youtube' === $renderName) {
+ continue;
+ }
+
+ $bowerJsFiles[] = "mediaelement/build/renderers/$renderName.min.js";
+ }
+ }
+
$viewBySession = api_get_setting('my_courses_view_by_session') === 'true';
if ($viewBySession || api_is_global_chat_enabled()) {
diff --git a/main/install/configuration.dist.php b/main/install/configuration.dist.php
index efdf43d1a0..744e399b9f 100755
--- a/main/install/configuration.dist.php
+++ b/main/install/configuration.dist.php
@@ -1083,6 +1083,8 @@ ALTER TABLE portfolio_category ADD parent_id INT(11) NOT NULL DEFAULT 0;
// $_configuration['video_features'] = ['features' => ['speed']];
// Hide the context menu on video player
//$_configuration['video_context_menu_hidden'] = false;
+// Enable player renderers for YouTube, Vimeo, Facebook, DailyMotion, Twitch medias
+//$_configuration['video_player_renderers'] = ['renderers' => ['dailymotion', 'facebook', 'twitch', 'vimeo', 'youtube']];
// Disable token verification when sending a message
// $_configuration['disable_token_in_new_message'] = false;
diff --git a/main/template/default/javascript/editor/ckeditor/config_js.tpl b/main/template/default/javascript/editor/ckeditor/config_js.tpl
index 8fe1566f30..b5d42ea55a 100644
--- a/main/template/default/javascript/editor/ckeditor/config_js.tpl
+++ b/main/template/default/javascript/editor/ckeditor/config_js.tpl
@@ -123,6 +123,26 @@ CKEDITOR.editorConfig = function (config) {
config.qMarkersRollsUrl = '{{ _p.web_ajax }}exercise.ajax.php?a=get_quiz_embeddable';
+ var videoTypesMap = {
+ dailymotion: 'DailyMotion',
+ facebook: 'Facebook',
+ twitch: 'Twitch',
+ vimeo: 'Vimeo',
+ youtube: 'YouTube'
+ };
+ config.videoTypes = [
+ [ 'MP4', 'video/mp4' ],
+ [ 'WebM', 'video/webm' ],
+ ];
+ {% set video_renderers = 'video_player_renderers'|api_get_configuration_value %}
+ {% if video_renderers and video_renderers.renderers %}
+ {{ video_renderers.renderers|json_encode }}.forEach(function(rendererName) {
+ if (videoTypesMap.hasOwnProperty(rendererName)) {
+ config.videoTypes.push( [videoTypesMap[rendererName], 'video/' + rendererName] );
+ }
+ });
+ {% endif %}
+
config.font_names = "{{ font_names }}";
};