diff --git a/app/Resources/public/assets/mediaelement/.bower.json b/app/Resources/public/assets/mediaelement/.bower.json
index f0493f5534..49a7e58be7 100644
--- a/app/Resources/public/assets/mediaelement/.bower.json
+++ b/app/Resources/public/assets/mediaelement/.bower.json
@@ -23,12 +23,12 @@
"./build/mediaelement-and-player.js",
"./build/mediaelementplayer.css"
],
- "version": "4.2.5",
- "_release": "4.2.5",
+ "version": "4.2.8",
+ "_release": "4.2.8",
"_resolution": {
"type": "version",
- "tag": "4.2.5",
- "commit": "71a4642fa25a8db2fb1f81f4171e2cd4fd64244c"
+ "tag": "4.2.8",
+ "commit": "0896fce181f4f1450bdc1c70598e66fe0bfa872b"
},
"_source": "https://github.com/johndyer/mediaelement.git",
"_target": "4.*",
diff --git a/app/Resources/public/assets/mediaelement/README.md b/app/Resources/public/assets/mediaelement/README.md
index 1975140d88..0dd05782db 100644
--- a/app/Resources/public/assets/mediaelement/README.md
+++ b/app/Resources/public/assets/mediaelement/README.md
@@ -14,6 +14,7 @@ One file. Any browser. Same UI.
[](https://coveralls.io/github/mediaelement/mediaelement)
[](https://mediaelement.mit-license.org/)
[](https://cdnjs.com/libraries/mediaelement)
+[](https://www.jsdelivr.com/package/npm/mediaelement)
# Table of Contents
@@ -39,6 +40,13 @@ In general, `MediaElement.js` supports **IE11+, MS Edge, Chrome, Firefox, Safari
**It is strongly recommended to read the entire documentation and check the `demo` folder to get the most out of this package**. Visit [here](docs) to start.
+## * IMPORTANT NOTE for Safari users (Jun 8, 2017)
+
+Since Sierra version, `autoplay` policies have changed. You may experience an error if you try to execute `play` programatically or via `autoplay` attribute with MediaElement, unless `muted` attribute is specified.
+
+For more information, read https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
+
+
## * IMPORTANT CHANGES on `4.2.0` version
As part of the continuous improvements the player, we have decided to drop completely support for IE9 and IE10, since market share of those browsers together is 0.4%, according to http://caniuse.com/usage-table.
diff --git a/app/Resources/public/assets/mediaelement/build/mediaelement-and-player.js b/app/Resources/public/assets/mediaelement/build/mediaelement-and-player.js
index e9d3a85256..1f431b8518 100644
--- a/app/Resources/public/assets/mediaelement/build/mediaelement-and-player.js
+++ b/app/Resources/public/assets/mediaelement/build/mediaelement-and-player.js
@@ -315,8 +315,8 @@ i18n.language = function () {
throw new TypeError('Language code must be a string value');
}
- if (!/^[a-z]{2}(\-[a-z]{2})?$/i.test(args[0])) {
- throw new TypeError('Language code must have format `xx` or `xx-xx`');
+ if (!/^[a-z]{2,3}((\-|_)[a-z]{2})?$/i.test(args[0])) {
+ throw new TypeError('Language code must have format 2-3 letters and. optionally, hyphen, underscore followed by 2 more letters');
}
i18n.lang = args[0];
@@ -864,9 +864,23 @@ var MediaElement = function MediaElement(idOrNode, options, sources) {
triggerAction = function triggerAction(methodName, args) {
try {
if (methodName === 'play' && t.mediaElement.rendererName === 'native_dash') {
- setTimeout(function () {
- t.mediaElement.renderer[methodName](args);
- }, 100);
+ var response = t.mediaElement.renderer[methodName](args);
+ if (response && typeof response.then === 'function') {
+ response.catch(function () {
+ if (t.mediaElement.paused) {
+ setTimeout(function () {
+ var tmpResponse = t.mediaElement.renderer.play();
+ if (tmpResponse !== undefined) {
+ tmpResponse.catch(function () {
+ if (!t.mediaElement.renderer.paused) {
+ t.mediaElement.renderer.pause();
+ }
+ });
+ }
+ }, 150);
+ }
+ });
+ }
} else {
t.mediaElement.renderer[methodName](args);
}
@@ -947,6 +961,15 @@ var MediaElement = function MediaElement(idOrNode, options, sources) {
}
};
+ t.mediaElement.destroy = function () {
+ var mediaElement = t.mediaElement.originalNode.cloneNode(true);
+ var wrapper = t.mediaElement.parentElement;
+ mediaElement.removeAttribute('id');
+ mediaElement.remove();
+ t.mediaElement.remove();
+ wrapper.append(mediaElement);
+ };
+
if (mediaFiles.length) {
t.mediaElement.src = mediaFiles;
}
@@ -975,6 +998,7 @@ var MediaElement = function MediaElement(idOrNode, options, sources) {
};
_window2.default.MediaElement = MediaElement;
+_mejs2.default.MediaElement = MediaElement;
exports.default = MediaElement;
@@ -993,7 +1017,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var mejs = {};
-mejs.version = '4.2.5';
+mejs.version = '4.2.8';
mejs.html5media = {
properties: ['volume', 'src', 'currentTime', 'muted', 'duration', 'paused', 'ended', 'buffered', 'error', 'networkState', 'readyState', 'seeking', 'seekable', 'currentSrc', 'preload', 'bufferedBytes', 'bufferedTime', 'initialTime', 'startOffsetTime', 'defaultPlaybackRate', 'playbackRate', 'played', 'autoplay', 'loop', 'controls'],
@@ -1207,6 +1231,21 @@ Object.assign(_player2.default.prototype, {
player.fullscreenBtn = fullscreenBtn;
+ t.options.keyActions.push({
+ keys: [70],
+ action: function action(player, media, key, event) {
+ if (!event.ctrlKey) {
+ if (typeof player.enterFullScreen !== 'undefined') {
+ if (player.isFullScreen) {
+ player.exitFullScreen();
+ } else {
+ player.enterFullScreen();
+ }
+ }
+ }
+ }
+ });
+
t.exitFullscreenCallback = function (e) {
var key = e.which || e.keyCode || 0;
if (key === 27 && (Features.HAS_TRUE_NATIVE_FULLSCREEN && Features.IS_FULLSCREEN || t.isFullScreen)) {
@@ -1261,7 +1300,7 @@ Object.assign(_player2.default.prototype, {
enterFullScreen: function enterFullScreen() {
var t = this,
isNative = t.media.rendererName !== null && /(html5|native)/i.test(t.media.rendererName),
- containerStyles = getComputedStyle(t.container);
+ containerStyles = getComputedStyle(t.getElement(t.container));
if (t.options.useFakeFullscreen === false && Features.IS_IOS && Features.HAS_IOS_FULLSCREEN && typeof t.media.originalNode.webkitEnterFullscreen === 'function' && t.media.originalNode.canPlayType((0, _media.getTypeFromFile)(t.media.getSrc()))) {
t.media.originalNode.webkitEnterFullscreen();
@@ -1269,13 +1308,13 @@ Object.assign(_player2.default.prototype, {
}
(0, _dom.addClass)(_document2.default.documentElement, t.options.classPrefix + 'fullscreen');
- (0, _dom.addClass)(t.container, t.options.classPrefix + 'container-fullscreen');
+ (0, _dom.addClass)(t.getElement(t.container), t.options.classPrefix + 'container-fullscreen');
t.normalHeight = parseFloat(containerStyles.height);
t.normalWidth = parseFloat(containerStyles.width);
if (t.fullscreenMode === 'native-native' || t.fullscreenMode === 'plugin-native') {
- Features.requestFullScreen(t.container);
+ Features.requestFullScreen(t.getElement(t.container));
if (t.isInIframe) {
setTimeout(function checkFullscreen() {
@@ -1297,12 +1336,12 @@ Object.assign(_player2.default.prototype, {
}
}
- t.container.style.width = '100%';
- t.container.style.height = '100%';
+ t.getElement(t.container).style.width = '100%';
+ t.getElement(t.container).style.height = '100%';
t.containerSizeTimeout = setTimeout(function () {
- t.container.style.width = '100%';
- t.container.style.height = '100%';
+ t.getElement(t.container).style.width = '100%';
+ t.getElement(t.container).style.height = '100%';
t.setControlsSize();
}, 500);
@@ -1310,7 +1349,7 @@ Object.assign(_player2.default.prototype, {
t.node.style.width = '100%';
t.node.style.height = '100%';
} else {
- var elements = t.container.querySelectorAll('embed, object, video'),
+ var elements = t.getElement(t.container).querySelectorAll('embed, object, video'),
_total = elements.length;
for (var i = 0; i < _total; i++) {
elements[i].style.width = '100%';
@@ -1322,7 +1361,7 @@ Object.assign(_player2.default.prototype, {
t.media.setSize(screen.width, screen.height);
}
- var layers = t.layers.children,
+ var layers = t.getElement(t.layers).children,
total = layers.length;
for (var _i = 0; _i < total; _i++) {
layers[_i].style.width = '100%';
@@ -1338,14 +1377,14 @@ Object.assign(_player2.default.prototype, {
t.isFullScreen = true;
var zoomFactor = Math.min(screen.width / t.width, screen.height / t.height),
- captionText = t.container.querySelector('.' + t.options.classPrefix + 'captions-text');
+ captionText = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-text');
if (captionText) {
captionText.style.fontSize = zoomFactor * 100 + '%';
captionText.style.lineHeight = 'normal';
- t.container.querySelector('.' + t.options.classPrefix + 'captions-position').style.bottom = '45px';
+ t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-position').style.bottom = (screen.height - t.normalHeight) / 2 - t.getElement(t.controls).offsetHeight / 2 + zoomFactor + 15 + 'px';
}
- var event = (0, _general.createEvent)('enteredfullscreen', t.container);
- t.container.dispatchEvent(event);
+ var event = (0, _general.createEvent)('enteredfullscreen', t.getElement(t.container));
+ t.getElement(t.container).dispatchEvent(event);
},
exitFullScreen: function exitFullScreen() {
var t = this,
@@ -1358,17 +1397,17 @@ Object.assign(_player2.default.prototype, {
}
(0, _dom.removeClass)(_document2.default.documentElement, t.options.classPrefix + 'fullscreen');
- (0, _dom.removeClass)(t.container, t.options.classPrefix + 'container-fullscreen');
+ (0, _dom.removeClass)(t.getElement(t.container), t.options.classPrefix + 'container-fullscreen');
if (t.options.setDimensions) {
- t.container.style.width = t.normalWidth + 'px';
- t.container.style.height = t.normalHeight + 'px';
+ t.getElement(t.container).style.width = t.normalWidth + 'px';
+ t.getElement(t.container).style.height = t.normalHeight + 'px';
if (isNative) {
t.node.style.width = t.normalWidth + 'px';
t.node.style.height = t.normalHeight + 'px';
} else {
- var elements = t.container.querySelectorAll('embed, object, video'),
+ var elements = t.getElement(t.container).querySelectorAll('embed, object, video'),
_total2 = elements.length;
for (var i = 0; i < _total2; i++) {
elements[i].style.width = t.normalWidth + 'px';
@@ -1380,7 +1419,7 @@ Object.assign(_player2.default.prototype, {
t.media.setSize(t.normalWidth, t.normalHeight);
}
- var layers = t.layers.children,
+ var layers = t.getElement(t.layers).children,
total = layers.length;
for (var _i2 = 0; _i2 < total; _i2++) {
layers[_i2].style.width = t.normalWidth + 'px';
@@ -1396,14 +1435,14 @@ Object.assign(_player2.default.prototype, {
t.setControlsSize();
t.isFullScreen = false;
- var captionText = t.container.querySelector('.' + t.options.classPrefix + 'captions-text');
+ var captionText = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-text');
if (captionText) {
captionText.style.fontSize = '';
captionText.style.lineHeight = '';
- t.container.querySelector('.' + t.options.classPrefix + 'captions-position').style.bottom = '';
+ t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-position').style.bottom = '';
}
- var event = (0, _general.createEvent)('exitedfullscreen', t.container);
- t.container.dispatchEvent(event);
+ var event = (0, _general.createEvent)('exitedfullscreen', t.getElement(t.container));
+ t.getElement(t.container).dispatchEvent(event);
}
});
@@ -1548,7 +1587,38 @@ Object.assign(_player2.default.prototype, {
t.addControlElement(rail, 'progress');
- controls.querySelector('.' + t.options.classPrefix + 'time-buffering').style.display = 'none';
+ t.options.keyActions.push({
+ keys: [37, 227],
+ action: function action(player) {
+ if (!isNaN(player.duration) && player.duration > 0) {
+ if (player.isVideo) {
+ player.showControls();
+ player.startControlsTimer();
+ }
+
+ player.getElement(player.container).querySelector('.' + _player.config.classPrefix + 'time-total').focus();
+
+ var newTime = Math.max(player.currentTime - player.options.defaultSeekBackwardInterval(player), 0);
+ player.setCurrentTime(newTime);
+ }
+ }
+ }, {
+ keys: [39, 228],
+ action: function action(player) {
+
+ if (!isNaN(player.duration) && player.duration > 0) {
+ if (player.isVideo) {
+ player.showControls();
+ player.startControlsTimer();
+ }
+
+ player.getElement(player.container).querySelector('.' + _player.config.classPrefix + 'time-total').focus();
+
+ var newTime = Math.min(player.currentTime + player.options.defaultSeekForwardInterval(player), player.duration);
+ player.setCurrentTime(newTime);
+ }
+ }
+ });
t.rail = controls.querySelector('.' + t.options.classPrefix + 'time-rail');
t.total = controls.querySelector('.' + t.options.classPrefix + 'time-total');
@@ -1559,6 +1629,7 @@ Object.assign(_player2.default.prototype, {
t.timefloatcurrent = controls.querySelector('.' + t.options.classPrefix + 'time-float-current');
t.slider = controls.querySelector('.' + t.options.classPrefix + 'time-slider');
t.hovered = controls.querySelector('.' + t.options.classPrefix + 'time-hovered');
+ t.buffer = controls.querySelector('.' + t.options.classPrefix + 'time-buffering');
t.newTime = 0;
t.forcedHandlePause = false;
t.setTransformStyle = function (element, value) {
@@ -1569,6 +1640,8 @@ Object.assign(_player2.default.prototype, {
element.style.OTransform = value;
};
+ t.buffer.style.display = 'none';
+
var handleMouseMove = function handleMouseMove(e) {
var totalStyles = getComputedStyle(t.total),
offsetStyles = (0, _dom.offset)(t.total),
@@ -1625,7 +1698,7 @@ Object.assign(_player2.default.prototype, {
t.updateCurrent(t.newTime);
}
- if (!_constants.IS_IOS && !_constants.IS_ANDROID && t.timefloat) {
+ if (!_constants.IS_IOS && !_constants.IS_ANDROID) {
if (pos < 0) {
pos = 0;
}
@@ -1645,21 +1718,30 @@ Object.assign(_player2.default.prototype, {
}
}
- var half = t.timefloat.offsetWidth / 2;
- if (x <= t.timefloat.offsetWidth + half) {
- leftPos = half;
- } else if (x >= t.container.offsetWidth - half) {
- leftPos = t.total.offsetWidth - half;
- } else {
- leftPos = pos;
- }
+ if (t.timefloat) {
+ var half = t.timefloat.offsetWidth / 2,
+ offsetContainer = mejs.Utils.offset(t.getElement(t.container)),
+ tooltipStyles = getComputedStyle(t.timefloat);
+
+ if (x - offsetContainer.left < t.timefloat.offsetWidth) {
+ leftPos = half;
+ } else if (x - offsetContainer.left >= t.getElement(t.container).offsetWidth - half) {
+ leftPos = t.total.offsetWidth - half;
+ } else {
+ leftPos = pos;
+ }
- t.timefloat.style.left = leftPos + 'px';
- t.timefloatcurrent.innerHTML = (0, _time.secondsToTimeCode)(t.newTime, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength);
- t.timefloat.style.display = 'block';
+ if ((0, _dom.hasClass)(t.getElement(t.container), t.options.classPrefix + 'long-video')) {
+ leftPos += parseFloat(tooltipStyles.marginLeft) / 2 + t.timefloat.offsetWidth / 2;
+ }
+
+ t.timefloat.style.left = leftPos + 'px';
+ t.timefloatcurrent.innerHTML = (0, _time.secondsToTimeCode)(t.newTime, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength, player.options.timeFormat);
+ t.timefloat.style.display = 'block';
+ }
}
} else if (!_constants.IS_IOS && !_constants.IS_ANDROID && t.timefloat) {
- leftPos = t.timefloat.offsetWidth + width >= t.container.offsetWidth ? t.timefloat.offsetWidth / 2 : 0;
+ leftPos = t.timefloat.offsetWidth + width >= t.getElement(t.container).offsetWidth ? t.timefloat.offsetWidth / 2 : 0;
t.timefloat.style.left = leftPos + 'px';
t.timefloat.style.left = leftPos + 'px';
t.timefloat.style.display = 'block';
@@ -1668,7 +1750,7 @@ Object.assign(_player2.default.prototype, {
updateSlider = function updateSlider() {
var seconds = t.getCurrentTime(),
timeSliderText = _i18n2.default.t('mejs.time-slider'),
- time = (0, _time.secondsToTimeCode)(seconds, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength),
+ time = (0, _time.secondsToTimeCode)(seconds, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength, player.options.timeFormat),
duration = t.getDuration();
t.slider.setAttribute('role', 'slider');
@@ -1725,16 +1807,35 @@ Object.assign(_player2.default.prototype, {
seekBackward = player.options.defaultSeekBackwardInterval(media);
var seekTime = t.getCurrentTime();
+ var volume = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-slider');
+
+ if (keyCode === 38 || keyCode === 40) {
+ if (volume) {
+ volume.style.display = 'block';
+ }
+ if (t.isVideo) {
+ t.showControls();
+ t.startControlsTimer();
+ }
+
+ var newVolume = keyCode === 38 ? Math.min(t.volume + 0.1, 1) : Math.max(t.volume - 0.1, 0),
+ mutePlayer = newVolume <= 0;
+ t.setVolume(newVolume);
+ t.setMuted(mutePlayer);
+ return;
+ } else {
+ if (volume) {
+ volume.style.display = 'none';
+ }
+ }
switch (keyCode) {
case 37:
- case 40:
if (t.getDuration() !== Infinity) {
seekTime -= seekBackward;
}
break;
case 39:
- case 38:
if (t.getDuration() !== Infinity) {
seekTime += seekForward;
}
@@ -1745,8 +1846,9 @@ Object.assign(_player2.default.prototype, {
case 35:
seekTime = duration;
break;
+ case 13:
case 32:
- if (!_constants.IS_FIREFOX) {
+ if (_constants.IS_FIREFOX) {
if (t.paused) {
t.play();
} else {
@@ -1754,13 +1856,6 @@ Object.assign(_player2.default.prototype, {
}
}
return;
- case 13:
- if (t.paused) {
- t.play();
- } else {
- t.pause();
- }
- return;
default:
return;
}
@@ -1776,6 +1871,7 @@ Object.assign(_player2.default.prototype, {
}
t.setCurrentTime(seekTime);
+ player.showControls();
e.preventDefault();
e.stopPropagation();
@@ -1803,7 +1899,7 @@ Object.assign(_player2.default.prototype, {
var endEvents = ['mouseup', 'touchend'];
for (var j = 0, totalEvents = endEvents.length; j < totalEvents; j++) {
- t.container.addEventListener(endEvents[j], function (event) {
+ t.getElement(t.container).addEventListener(endEvents[j], function (event) {
var target = event.target;
if (target === t.slider || target.closest('.' + t.options.classPrefix + 'time-slider')) {
handleMouseMove(event);
@@ -1819,11 +1915,11 @@ Object.assign(_player2.default.prototype, {
});
}
}
- });
+ }, _constants.SUPPORT_PASSIVE_EVENT && events[i] === 'touchstart' ? { passive: true } : false);
}
t.slider.addEventListener('mouseenter', function (e) {
if (e.target === t.slider && t.getDuration() !== Infinity) {
- t.container.addEventListener('mousemove', function (event) {
+ t.getElement(t.container).addEventListener('mousemove', function (event) {
var target = event.target;
if (target === t.slider || target.closest('.' + t.options.classPrefix + 'time-slider')) {
handleMouseMove(event);
@@ -1874,8 +1970,35 @@ Object.assign(_player2.default.prototype, {
media.addEventListener('progress', t.broadcastCallback);
media.addEventListener('timeupdate', t.broadcastCallback);
+ media.addEventListener('play', function () {
+ t.buffer.style.display = 'none';
+ });
+ media.addEventListener('playing', function () {
+ t.buffer.style.display = 'none';
+ });
+ media.addEventListener('seeking', function () {
+ t.buffer.style.display = '';
+ });
+ media.addEventListener('seeked', function () {
+ t.buffer.style.display = 'none';
+ });
+ media.addEventListener('pause', function () {
+ t.buffer.style.display = 'none';
+ });
+ media.addEventListener('waiting', function () {
+ t.buffer.style.display = '';
+ });
+ media.addEventListener('loadeddata', function () {
+ t.buffer.style.display = '';
+ });
+ media.addEventListener('canplay', function () {
+ t.buffer.style.display = 'none';
+ });
+ media.addEventListener('error', function () {
+ t.buffer.style.display = 'none';
+ });
- t.container.addEventListener('controlsresize', function (e) {
+ t.getElement(t.container).addEventListener('controlsresize', function (e) {
if (t.getDuration() !== Infinity) {
player.setProgressRail(e);
if (!t.forcedHandlePause) {
@@ -1936,7 +2059,7 @@ Object.assign(_player2.default.prototype, {
t.setTransformStyle(t.handle, 'translateX(' + handlePos + 'px)');
if (t.options.useSmoothHover && !(0, _dom.hasClass)(t.hovered, 'no-hover')) {
- var pos = parseInt(t.hovered.getAttribute('pos'));
+ var pos = parseInt(t.hovered.getAttribute('pos'), 10);
pos = isNaN(pos) ? 0 : pos;
var hoverScaleX = pos / tW - handlePos / tW;
@@ -1986,9 +2109,10 @@ Object.assign(_player2.default.prototype, {
time.className = t.options.classPrefix + 'time';
time.setAttribute('role', 'timer');
time.setAttribute('aria-live', 'off');
- time.innerHTML = '' + (0, _time.secondsToTimeCode)(0, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength) + '';
+ time.innerHTML = '' + (0, _time.secondsToTimeCode)(0, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength, player.options.timeFormat) + '';
t.addControlElement(time, 'current');
+ player.updateCurrent();
t.updateTimeCallback = function () {
if (t.controlsAreVisible) {
player.updateCurrent();
@@ -2004,7 +2128,7 @@ Object.assign(_player2.default.prototype, {
currTime = controls.lastChild.querySelector('.' + t.options.classPrefix + 'currenttime');
if (currTime) {
- controls.querySelector('.' + t.options.classPrefix + 'time').innerHTML += t.options.timeAndDurationSeparator + '' + ((0, _time.secondsToTimeCode)(t.options.duration, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength) + '');
+ controls.querySelector('.' + t.options.classPrefix + 'time').innerHTML += t.options.timeAndDurationSeparator + '' + ((0, _time.secondsToTimeCode)(t.options.duration, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength, t.options.timeFormat) + '');
} else {
if (controls.querySelector('.' + t.options.classPrefix + 'currenttime')) {
(0, _dom.addClass)(controls.querySelector('.' + t.options.classPrefix + 'currenttime').parentNode, t.options.classPrefix + 'currenttime-container');
@@ -2012,15 +2136,21 @@ Object.assign(_player2.default.prototype, {
var duration = _document2.default.createElement('div');
duration.className = t.options.classPrefix + 'time ' + t.options.classPrefix + 'duration-container';
- duration.innerHTML = '' + ((0, _time.secondsToTimeCode)(t.options.duration, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength) + '');
+ duration.innerHTML = '' + ((0, _time.secondsToTimeCode)(t.options.duration, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength, t.options.timeFormat) + '');
t.addControlElement(duration, 'duration');
}
- media.addEventListener('timeupdate', t.updateTimeCallback);
+ t.updateDurationCallback = function () {
+ if (t.controlsAreVisible) {
+ player.updateDuration();
+ }
+ };
+
+ media.addEventListener('timeupdate', t.updateDurationCallback);
},
cleanduration: function cleanduration(player, controls, layers, media) {
- media.removeEventListener('timeupdate', player.updateTimeCallback);
+ media.removeEventListener('timeupdate', player.updateDurationCallback);
},
updateCurrent: function updateCurrent() {
var t = this;
@@ -2031,16 +2161,16 @@ Object.assign(_player2.default.prototype, {
currentTime = 0;
}
- var timecode = (0, _time.secondsToTimeCode)(currentTime, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength);
+ var timecode = (0, _time.secondsToTimeCode)(currentTime, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength, t.options.timeFormat);
if (timecode.length > 5) {
- (0, _dom.addClass)(t.container, t.options.classPrefix + 'long-video');
+ (0, _dom.addClass)(t.getElement(t.container), t.options.classPrefix + 'long-video');
} else {
- (0, _dom.removeClass)(t.container, t.options.classPrefix + 'long-video');
+ (0, _dom.removeClass)(t.getElement(t.container), t.options.classPrefix + 'long-video');
}
- if (t.controls.querySelector('.' + t.options.classPrefix + 'currenttime')) {
- t.controls.querySelector('.' + t.options.classPrefix + 'currenttime').innerText = timecode;
+ if (t.getElement(t.controls).querySelector('.' + t.options.classPrefix + 'currenttime')) {
+ t.getElement(t.controls).querySelector('.' + t.options.classPrefix + 'currenttime').innerText = timecode;
}
},
updateDuration: function updateDuration() {
@@ -2056,16 +2186,16 @@ Object.assign(_player2.default.prototype, {
duration = t.options.duration;
}
- var timecode = (0, _time.secondsToTimeCode)(duration, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength);
+ var timecode = (0, _time.secondsToTimeCode)(duration, t.options.alwaysShowHours, t.options.showTimecodeFrameCount, t.options.framesPerSecond, t.options.secondsDecimalLength, t.options.timeFormat);
if (timecode.length > 5) {
- (0, _dom.addClass)(t.container, t.options.classPrefix + 'long-video');
+ (0, _dom.addClass)(t.getElement(t.container), t.options.classPrefix + 'long-video');
} else {
- (0, _dom.removeClass)(t.container, t.options.classPrefix + 'long-video');
+ (0, _dom.removeClass)(t.getElement(t.container), t.options.classPrefix + 'long-video');
}
- if (t.controls.querySelector('.' + t.options.classPrefix + 'duration') && duration > 0) {
- t.controls.querySelector('.' + t.options.classPrefix + 'duration').innerHTML = timecode;
+ if (t.getElement(t.controls).querySelector('.' + t.options.classPrefix + 'duration') && duration > 0) {
+ t.getElement(t.controls).querySelector('.' + t.options.classPrefix + 'duration').innerHTML = timecode;
}
}
});
@@ -2118,6 +2248,8 @@ Object.assign(_player2.default.prototype, {
buildtracks: function buildtracks(player, controls, layers, media) {
+ this.findTracks();
+
if (!player.tracks.length && (!player.trackFiles || !player.trackFiles.length === 0)) {
return;
}
@@ -2187,12 +2319,13 @@ Object.assign(_player2.default.prototype, {
outEvents = ['mouseleave', 'focusout'];
if (t.options.toggleCaptionsButtonWhenOnlyOne && subtitleCount === 1) {
- player.captionsButton.addEventListener('click', function () {
+ player.captionsButton.addEventListener('click', function (e) {
var trackId = 'none';
if (player.selectedTrack === null) {
trackId = player.tracks[0].trackId;
}
- player.setTrack(trackId);
+ var keyboard = e.keyCode || e.which;
+ player.setTrack(trackId, typeof keyboard !== 'undefined');
});
} else {
var labels = player.captionsButton.querySelectorAll('.' + t.options.classPrefix + 'captions-selector-label'),
@@ -2211,18 +2344,20 @@ Object.assign(_player2.default.prototype, {
}
for (var _i5 = 0, _total3 = captions.length; _i5 < _total3; _i5++) {
- captions[_i5].addEventListener('click', function () {
- player.setTrack(this.value);
+ captions[_i5].addEventListener('click', function (e) {
+ var keyboard = e.keyCode || e.which;
+ player.setTrack(this.value, typeof keyboard !== 'undefined');
});
}
for (var _i6 = 0, _total4 = labels.length; _i6 < _total4; _i6++) {
- labels[_i6].addEventListener('click', function () {
+ labels[_i6].addEventListener('click', function (e) {
var radio = (0, _dom.siblings)(this, function (el) {
return el.tagName === 'INPUT';
})[0],
event = (0, _general.createEvent)('click', radio);
radio.dispatchEvent(event);
+ e.preventDefault();
});
}
@@ -2250,17 +2385,17 @@ Object.assign(_player2.default.prototype, {
});
if (!player.options.alwaysShowControls) {
- player.container.addEventListener('controlsshown', function () {
- (0, _dom.addClass)(player.container.querySelector('.' + t.options.classPrefix + 'captions-position'), t.options.classPrefix + 'captions-position-hover');
+ player.getElement(player.container).addEventListener('controlsshown', function () {
+ (0, _dom.addClass)(player.getElement(player.container).querySelector('.' + t.options.classPrefix + 'captions-position'), t.options.classPrefix + 'captions-position-hover');
});
- player.container.addEventListener('controlshidden', function () {
+ player.getElement(player.container).addEventListener('controlshidden', function () {
if (!media.paused) {
- (0, _dom.removeClass)(player.container.querySelector('.' + t.options.classPrefix + 'captions-position'), t.options.classPrefix + 'captions-position-hover');
+ (0, _dom.removeClass)(player.getElement(player.container).querySelector('.' + t.options.classPrefix + 'captions-position'), t.options.classPrefix + 'captions-position-hover');
}
});
} else {
- (0, _dom.addClass)(player.container.querySelector('.' + t.options.classPrefix + 'captions-position'), t.options.classPrefix + 'captions-position-hover');
+ (0, _dom.addClass)(player.getElement(player.container).querySelector('.' + t.options.classPrefix + 'captions-position'), t.options.classPrefix + 'captions-position-hover');
}
media.addEventListener('timeupdate', function () {
@@ -2297,7 +2432,7 @@ Object.assign(_player2.default.prototype, {
rebuildtracks: function rebuildtracks() {
var t = this;
t.findTracks();
- t.buildtracks(t, t.controls, t.layers, t.media);
+ t.buildtracks(t, t.getElement(t.controls), t.getElement(t.layers), t.media);
},
findTracks: function findTracks() {
var t = this,
@@ -2320,7 +2455,7 @@ Object.assign(_player2.default.prototype, {
});
}
},
- setTrack: function setTrack(trackId) {
+ setTrack: function setTrack(trackId, setByKeyboard) {
var t = this,
radios = t.captionsButton.querySelectorAll('input[type="radio"]'),
@@ -2364,6 +2499,12 @@ Object.assign(_player2.default.prototype, {
var event = (0, _general.createEvent)('captionschange', t.media);
event.detail.caption = t.selectedTrack;
t.media.dispatchEvent(event);
+
+ if (!setByKeyboard) {
+ setTimeout(function () {
+ t.getElement(t.container).focus();
+ }, 500);
+ }
},
loadNextTrack: function loadNextTrack() {
var t = this;
@@ -2590,7 +2731,7 @@ Object.assign(_player2.default.prototype, {
for (var _i13 = 0, _total10 = radios.length; _i13 < _total10; _i13++) {
radios[_i13].disabled = false;
radios[_i13].checked = false;
- radios[_i13].addEventListener('click', function () {
+ radios[_i13].addEventListener('click', function (e) {
var self = this,
listItems = t.chaptersButton.querySelectorAll('li'),
label = (0, _dom.siblings)(self, function (el) {
@@ -2606,6 +2747,13 @@ Object.assign(_player2.default.prototype, {
listItems[_i14].setAttribute('aria-checked', false);
}
+ var keyboard = e.keyCode || e.which;
+ if (typeof keyboard === 'undefined') {
+ setTimeout(function () {
+ t.getElement(t.container).focus();
+ }, 500);
+ }
+
t.media.setCurrentTime(parseFloat(self.value));
if (t.media.paused) {
t.media.play();
@@ -2614,12 +2762,13 @@ Object.assign(_player2.default.prototype, {
}
for (var _i15 = 0, _total12 = labels.length; _i15 < _total12; _i15++) {
- labels[_i15].addEventListener('click', function () {
+ labels[_i15].addEventListener('click', function (e) {
var radio = (0, _dom.siblings)(this, function (el) {
return el.tagName === 'INPUT';
})[0],
event = (0, _general.createEvent)('click', radio);
radio.dispatchEvent(event);
+ e.preventDefault();
});
}
},
@@ -2870,6 +3019,60 @@ Object.assign(_player2.default.prototype, {
t.addControlElement(mute, 'volume');
+ t.options.keyActions.push({
+ keys: [38],
+ action: function action(player) {
+ var volumeSlider = player.getElement(player.container).querySelector('.' + _player.config.classPrefix + 'volume-slider');
+ if (volumeSlider || player.getElement(player.container).querySelector('.' + _player.config.classPrefix + 'volume-slider').matches(':focus')) {
+ volumeSlider.style.display = 'block';
+ }
+ if (player.isVideo) {
+ player.showControls();
+ player.startControlsTimer();
+ }
+
+ var newVolume = Math.min(player.volume + 0.1, 1);
+ player.setVolume(newVolume);
+ if (newVolume > 0) {
+ player.setMuted(false);
+ }
+ }
+ }, {
+ keys: [40],
+ action: function action(player) {
+ var volumeSlider = player.getElement(player.container).querySelector('.' + _player.config.classPrefix + 'volume-slider');
+ if (volumeSlider) {
+ volumeSlider.style.display = 'block';
+ }
+
+ if (player.isVideo) {
+ player.showControls();
+ player.startControlsTimer();
+ }
+
+ var newVolume = Math.max(player.volume - 0.1, 0);
+ player.setVolume(newVolume);
+
+ if (newVolume <= 0.1) {
+ player.setMuted(true);
+ }
+ }
+ }, {
+ keys: [77],
+ action: function action(player) {
+ player.getElement(player.container).querySelector('.' + _player.config.classPrefix + 'volume-slider').style.display = 'block';
+ if (player.isVideo) {
+ player.showControls();
+ player.startControlsTimer();
+ }
+ if (player.media.muted) {
+ player.setMuted(false);
+ } else {
+ player.setMuted(true);
+ }
+ }
+ });
+
if (mode === 'horizontal') {
var anchor = _document2.default.createElement('a');
anchor.className = t.options.classPrefix + 'horizontal-volume-slider';
@@ -2891,10 +3094,10 @@ Object.assign(_player2.default.prototype, {
volumeSlider.setAttribute('aria-valuetext', volume + '%');
};
- var volumeSlider = mode === 'vertical' ? t.container.querySelector('.' + t.options.classPrefix + 'volume-slider') : t.container.querySelector('.' + t.options.classPrefix + 'horizontal-volume-slider'),
- volumeTotal = mode === 'vertical' ? t.container.querySelector('.' + t.options.classPrefix + 'volume-total') : t.container.querySelector('.' + t.options.classPrefix + 'horizontal-volume-total'),
- volumeCurrent = mode === 'vertical' ? t.container.querySelector('.' + t.options.classPrefix + 'volume-current') : t.container.querySelector('.' + t.options.classPrefix + 'horizontal-volume-current'),
- volumeHandle = mode === 'vertical' ? t.container.querySelector('.' + t.options.classPrefix + 'volume-handle') : t.container.querySelector('.' + t.options.classPrefix + 'horizontal-volume-handle'),
+ var volumeSlider = mode === 'vertical' ? t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-slider') : t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'horizontal-volume-slider'),
+ volumeTotal = mode === 'vertical' ? t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-total') : t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'horizontal-volume-total'),
+ volumeCurrent = mode === 'vertical' ? t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-current') : t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'horizontal-volume-current'),
+ volumeHandle = mode === 'vertical' ? t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-handle') : t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'horizontal-volume-handle'),
positionVolumeHandle = function positionVolumeHandle(volume) {
if (volume === null || isNaN(volume) || volume === undefined) {
@@ -2980,6 +3183,13 @@ Object.assign(_player2.default.prototype, {
}
};
+ player.getElement(player.container).addEventListener('keydown', function (e) {
+ var hasFocus = !!e.target.closest('.' + t.options.classPrefix + 'container');
+ if (!hasFocus && mode === 'vertical') {
+ volumeSlider.style.display = 'none';
+ }
+ });
+
mute.addEventListener('mouseenter', function (e) {
if (e.target === mute) {
volumeSlider.style.display = 'block';
@@ -3100,7 +3310,6 @@ Object.assign(_player2.default.prototype, {
if (!modified && !rendered) {
if (player.options.startVolume === 0 || media.originalNode.muted) {
media.setMuted(true);
- player.options.startVolume = 0;
}
media.setVolume(player.options.startVolume);
t.setControlsSize();
@@ -3115,7 +3324,7 @@ Object.assign(_player2.default.prototype, {
toggleMute();
}
- t.container.addEventListener('controlsresize', function () {
+ t.getElement(t.container).addEventListener('controlsresize', function () {
toggleMute();
});
}
@@ -3366,99 +3575,6 @@ var config = exports.config = {
}
}
}
- }, {
- keys: [38],
- action: function action(player) {
-
- if (player.container.querySelector('.' + config.classPrefix + 'volume-button>button').matches(':focus') || player.container.querySelector('.' + config.classPrefix + 'volume-slider').matches(':focus')) {
- player.container.querySelector('.' + config.classPrefix + 'volume-slider').style.display = '';
- }
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
-
- var newVolume = Math.min(player.volume + 0.1, 1);
- player.setVolume(newVolume);
- if (newVolume > 0) {
- player.setMuted(false);
- }
- }
- }, {
- keys: [40],
- action: function action(player) {
-
- if (player.container.querySelector('.' + config.classPrefix + 'volume-button>button').matches(':focus') || player.container.querySelector('.' + config.classPrefix + 'volume-slider').matches(':focus')) {
- player.container.querySelector('.' + config.classPrefix + 'volume-slider').style.display = '';
- }
-
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
-
- var newVolume = Math.max(player.volume - 0.1, 0);
- player.setVolume(newVolume);
-
- if (newVolume <= 0.1) {
- player.setMuted(true);
- }
- }
- }, {
- keys: [37, 227],
- action: function action(player) {
- if (!isNaN(player.duration) && player.duration > 0) {
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
-
- var newTime = Math.max(player.currentTime - player.options.defaultSeekBackwardInterval(player), 0);
- player.setCurrentTime(newTime);
- }
- }
- }, {
- keys: [39, 228],
- action: function action(player) {
-
- if (!isNaN(player.duration) && player.duration > 0) {
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
-
- var newTime = Math.min(player.currentTime + player.options.defaultSeekForwardInterval(player), player.duration);
- player.setCurrentTime(newTime);
- }
- }
- }, {
- keys: [70],
- action: function action(player, media, key, event) {
- if (!event.ctrlKey) {
- if (typeof player.enterFullScreen !== 'undefined') {
- if (player.isFullScreen) {
- player.exitFullScreen();
- } else {
- player.enterFullScreen();
- }
- }
- }
- }
- }, {
- keys: [77],
- action: function action(player) {
-
- player.container.querySelector('.' + config.classPrefix + 'volume-slider').style.display = '';
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
- if (player.media.muted) {
- player.setMuted(false);
- } else {
- player.setMuted(true);
- }
- }
}]
};
@@ -3527,180 +3643,191 @@ var MediaElementPlayer = function () {
_mejs2.default.players[t.id] = t;
- var playerOptions = Object.assign({}, t.options, {
- success: function success(media, domNode) {
- t._meReady(media, domNode);
- },
- error: function error(e) {
- t._handleError(e);
- }
- }),
- tagName = t.node.tagName.toLowerCase();
-
- t.isDynamic = tagName !== 'audio' && tagName !== 'video' && tagName !== 'iframe';
- t.isVideo = t.isDynamic ? t.options.isVideo : tagName !== 'audio' && t.options.isVideo;
- t.mediaFiles = null;
- t.trackFiles = null;
-
- if (_constants.IS_IPAD && t.options.iPadUseNativeControls || _constants.IS_IPHONE && t.options.iPhoneUseNativeControls) {
- t.node.setAttribute('controls', true);
+ t.init();
- if (_constants.IS_IPAD && t.node.getAttribute('autoplay')) {
- t.play();
- }
- } else if ((t.isVideo || !t.isVideo && (t.options.features.length || t.options.useDefaultControls)) && !(_constants.IS_ANDROID && t.options.AndroidUseNativeControls)) {
- t.node.removeAttribute('controls');
- var videoPlayerTitle = t.isVideo ? _i18n2.default.t('mejs.video-player') : _i18n2.default.t('mejs.audio-player');
+ return t;
+ }
- var offscreen = _document2.default.createElement('span');
- offscreen.className = t.options.classPrefix + 'offscreen';
- offscreen.innerText = videoPlayerTitle;
- t.media.parentNode.insertBefore(offscreen, t.media);
+ _createClass(MediaElementPlayer, [{
+ key: 'getElement',
+ value: function getElement(element) {
+ return element;
+ }
+ }, {
+ key: 'init',
+ value: function init() {
+ var t = this,
+ playerOptions = Object.assign({}, t.options, {
+ success: function success(media, domNode) {
+ t._meReady(media, domNode);
+ },
+ error: function error(e) {
+ t._handleError(e);
+ }
+ }),
+ tagName = t.node.tagName.toLowerCase();
+
+ t.isDynamic = tagName !== 'audio' && tagName !== 'video' && tagName !== 'iframe';
+ t.isVideo = t.isDynamic ? t.options.isVideo : tagName !== 'audio' && t.options.isVideo;
+ t.mediaFiles = null;
+ t.trackFiles = null;
+
+ if (_constants.IS_IPAD && t.options.iPadUseNativeControls || _constants.IS_IPHONE && t.options.iPhoneUseNativeControls) {
+ t.node.setAttribute('controls', true);
+
+ if (_constants.IS_IPAD && t.node.getAttribute('autoplay')) {
+ t.play();
+ }
+ } else if ((t.isVideo || !t.isVideo && (t.options.features.length || t.options.useDefaultControls)) && !(_constants.IS_ANDROID && t.options.AndroidUseNativeControls)) {
+ t.node.removeAttribute('controls');
+ var videoPlayerTitle = t.isVideo ? _i18n2.default.t('mejs.video-player') : _i18n2.default.t('mejs.audio-player');
+
+ var offscreen = _document2.default.createElement('span');
+ offscreen.className = t.options.classPrefix + 'offscreen';
+ offscreen.innerText = videoPlayerTitle;
+ t.media.parentNode.insertBefore(offscreen, t.media);
+
+ t.container = _document2.default.createElement('div');
+ t.getElement(t.container).id = t.id;
+ t.getElement(t.container).className = t.options.classPrefix + 'container ' + t.options.classPrefix + 'container-keyboard-inactive ' + t.media.className;
+ t.getElement(t.container).tabIndex = 0;
+ t.getElement(t.container).setAttribute('role', 'application');
+ t.getElement(t.container).setAttribute('aria-label', videoPlayerTitle);
+ t.getElement(t.container).innerHTML = '' + ('
') + ('
') + ('
') + '
' + ('
') + ('
') + ('
') + '
';
}
if (e.message) {
- errorContent += '' + e.message + '
';
+ errorContent = '' + e.message + '
';
}
if (e.urls) {
@@ -4200,10 +4316,14 @@ var MediaElementPlayer = function () {
}
}
- if (errorContent && t.layers.querySelector('.' + t.options.classPrefix + 'overlay-error')) {
+ if (errorContent && t.getElement(t.layers).querySelector('.' + t.options.classPrefix + 'overlay-error')) {
errorContainer.innerHTML = errorContent;
- t.layers.querySelector('.' + t.options.classPrefix + 'overlay-error').innerHTML = '' + imgError + errorContainer.outerHTML;
- t.layers.querySelector('.' + t.options.classPrefix + 'overlay-error').parentNode.style.display = 'block';
+ t.getElement(t.layers).querySelector('.' + t.options.classPrefix + 'overlay-error').innerHTML = '' + imgError + errorContainer.outerHTML;
+ t.getElement(t.layers).querySelector('.' + t.options.classPrefix + 'overlay-error').parentNode.style.display = 'block';
+ }
+
+ if (t.controlsEnabled) {
+ t.disableControls();
}
}
}, {
@@ -4261,7 +4381,7 @@ var MediaElementPlayer = function () {
parent = function () {
var parentEl = void 0,
- el = t.container;
+ el = t.getElement(t.container);
while (el) {
try {
@@ -4285,8 +4405,8 @@ var MediaElementPlayer = function () {
parentStyles = parent ? getComputedStyle(parent, null) : getComputedStyle(_document2.default.body, null),
nativeWidth = function () {
if (t.isVideo) {
- if (t.media.videoWidth && t.media.videoWidth > 0) {
- return t.media.videoWidth;
+ if (t.node.videoWidth && t.node.videoWidth > 0) {
+ return t.node.videoWidth;
} else if (t.node.getAttribute('width')) {
return t.node.getAttribute('width');
} else {
@@ -4298,8 +4418,8 @@ var MediaElementPlayer = function () {
}(),
nativeHeight = function () {
if (t.isVideo) {
- if (t.media.videoHeight && t.media.videoHeight > 0) {
- return t.media.videoHeight;
+ if (t.node.videoHeight && t.node.videoHeight > 0) {
+ return t.node.videoHeight;
} else if (t.node.getAttribute('height')) {
return t.node.getAttribute('height');
} else {
@@ -4315,8 +4435,8 @@ var MediaElementPlayer = function () {
return ratio;
}
- if (t.media.videoWidth && t.media.videoWidth > 0 && t.media.videoHeight && t.media.videoHeight > 0) {
- ratio = t.height >= t.width ? t.media.videoWidth / t.media.videoHeight : t.media.videoHeight / t.media.videoWidth;
+ if (t.node.videoWidth && t.node.videoWidth > 0 && t.node.videoHeight && t.node.videoHeight > 0) {
+ ratio = t.height >= t.width ? t.node.videoWidth / t.node.videoHeight : t.node.videoHeight / t.node.videoWidth;
} else {
ratio = t.initialAspectRatio;
}
@@ -4346,14 +4466,14 @@ var MediaElementPlayer = function () {
newHeight = parentHeight;
}
- if (t.container.parentNode.length > 0 && t.container.parentNode.tagName.toLowerCase() === 'body') {
+ if (t.getElement(t.container).parentNode.length > 0 && t.getElement(t.container).parentNode.tagName.toLowerCase() === 'body') {
parentWidth = _window2.default.innerWidth || _document2.default.documentElement.clientWidth || _document2.default.body.clientWidth;
newHeight = _window2.default.innerHeight || _document2.default.documentElement.clientHeight || _document2.default.body.clientHeight;
}
if (newHeight && parentWidth) {
- t.container.style.width = parentWidth + 'px';
- t.container.style.height = newHeight + 'px';
+ t.getElement(t.container).style.width = parentWidth + 'px';
+ t.getElement(t.container).style.height = newHeight + 'px';
t.node.style.width = '100%';
t.node.style.height = '100%';
@@ -4362,7 +4482,7 @@ var MediaElementPlayer = function () {
t.media.setSize(parentWidth, newHeight);
}
- var layerChildren = t.layers.children;
+ var layerChildren = t.getElement(t.layers).children;
for (var i = 0, total = layerChildren.length; i < total; i++) {
layerChildren[i].style.width = '100%';
layerChildren[i].style.height = '100%';
@@ -4373,22 +4493,31 @@ var MediaElementPlayer = function () {
key: 'setFillMode',
value: function setFillMode() {
var t = this;
+ var isIframe = _window2.default.self !== _window2.default.top && _window2.default.frameElement !== null;
+ var parent = function () {
+ var parentEl = void 0,
+ el = t.getElement(t.container);
- var parent = void 0,
- isIframe = false;
+ while (el) {
+ try {
+ if (_constants.IS_FIREFOX && el.tagName.toLowerCase() === 'html' && _window2.default.self !== _window2.default.top && _window2.default.frameElement !== null) {
+ return _window2.default.frameElement;
+ } else {
+ parentEl = el.parentElement;
+ }
+ } catch (e) {
+ parentEl = el.parentElement;
+ }
- try {
- if (_window2.default.self !== _window2.default.top) {
- isIframe = true;
- parent = _window2.default.frameElement;
- } else {
- parent = t.outerContainer;
+ if (parentEl && dom.visible(parentEl)) {
+ return parentEl;
+ }
+ el = parentEl;
}
- } catch (e) {
- parent = t.outerContainer;
- }
- var parentStyles = getComputedStyle(parent);
+ return null;
+ }();
+ var parentStyles = parent ? getComputedStyle(parent, null) : getComputedStyle(_document2.default.body, null);
if (t.node.style.height !== 'none' && t.node.style.height !== t.height) {
t.node.style.height = 'auto';
@@ -4428,12 +4557,12 @@ var MediaElementPlayer = function () {
t.setDimensions('100%', '100%');
- var poster = t.container.querySelector('.' + t.options.classPrefix + 'poster>img');
+ var poster = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'poster>img');
if (poster) {
poster.style.display = '';
}
- var targetElement = t.container.querySelectorAll('object, embed, iframe, video'),
+ var targetElement = t.getElement(t.container).querySelectorAll('object, embed, iframe, video'),
initHeight = t.height,
initWidth = t.width,
scaleX1 = parentWidth,
@@ -4465,10 +4594,10 @@ var MediaElementPlayer = function () {
width = (0, _general.isString)(width) && width.indexOf('%') > -1 ? width : parseFloat(width) + 'px';
height = (0, _general.isString)(height) && height.indexOf('%') > -1 ? height : parseFloat(height) + 'px';
- t.container.style.width = width;
- t.container.style.height = height;
+ t.getElement(t.container).style.width = width;
+ t.getElement(t.container).style.height = height;
- var layers = t.layers.children;
+ var layers = t.getElement(t.layers).children;
for (var i = 0, total = layers.length; i < total; i++) {
layers[i].style.width = width;
layers[i].style.height = height;
@@ -4479,7 +4608,7 @@ var MediaElementPlayer = function () {
value: function setControlsSize() {
var t = this;
- if (!dom.visible(t.container)) {
+ if (!dom.visible(t.getElement(t.container))) {
return;
}
@@ -4501,19 +4630,19 @@ var MediaElementPlayer = function () {
siblingsWidth += totalMargin + (totalMargin === 0 ? railMargin * 2 : railMargin) + 1;
- t.container.style.minWidth = siblingsWidth + 'px';
+ t.getElement(t.container).style.minWidth = siblingsWidth + 'px';
- var event = (0, _general.createEvent)('controlsresize', t.container);
- t.container.dispatchEvent(event);
+ var event = (0, _general.createEvent)('controlsresize', t.getElement(t.container));
+ t.getElement(t.container).dispatchEvent(event);
} else {
- var children = t.controls.children;
+ var children = t.getElement(t.controls).children;
var minWidth = 0;
for (var _i = 0, _total = children.length; _i < _total; _i++) {
minWidth += children[_i].offsetWidth;
}
- t.container.style.minWidth = minWidth + 'px';
+ t.getElement(t.container).style.minWidth = minWidth + 'px';
}
}
}, {
@@ -4523,11 +4652,11 @@ var MediaElementPlayer = function () {
var t = this;
if (t.featurePosition[key] !== undefined) {
- var child = t.controls.children[t.featurePosition[key] - 1];
+ var child = t.getElement(t.controls).children[t.featurePosition[key] - 1];
child.parentNode.insertBefore(element, child.nextSibling);
} else {
- t.controls.appendChild(element);
- var children = t.controls.children;
+ t.getElement(t.controls).appendChild(element);
+ var children = t.getElement(t.controls).children;
for (var i = 0, total = children.length; i < total; i++) {
if (element === children[i]) {
t.featurePosition[key] = i;
@@ -4579,35 +4708,39 @@ var MediaElementPlayer = function () {
value: function setPoster(url) {
var t = this;
- var posterDiv = t.container.querySelector('.' + t.options.classPrefix + 'poster');
+ if (t.getElement(t.container)) {
+ var posterDiv = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'poster');
- if (!posterDiv) {
- posterDiv = _document2.default.createElement('div');
- posterDiv.className = t.options.classPrefix + 'poster ' + t.options.classPrefix + 'layer';
- t.layers.appendChild(posterDiv);
- }
+ if (!posterDiv) {
+ posterDiv = _document2.default.createElement('div');
+ posterDiv.className = t.options.classPrefix + 'poster ' + t.options.classPrefix + 'layer';
+ t.getElement(t.layers).appendChild(posterDiv);
+ }
- var posterImg = posterDiv.querySelector('img');
+ var posterImg = posterDiv.querySelector('img');
- if (!posterImg && url) {
- posterImg = _document2.default.createElement('img');
- posterImg.className = t.options.classPrefix + 'poster-img';
- posterImg.width = '100%';
- posterImg.height = '100%';
- posterDiv.style.display = '';
- posterDiv.appendChild(posterImg);
- }
+ if (!posterImg && url) {
+ posterImg = _document2.default.createElement('img');
+ posterImg.className = t.options.classPrefix + 'poster-img';
+ posterImg.width = '100%';
+ posterImg.height = '100%';
+ posterDiv.style.display = '';
+ posterDiv.appendChild(posterImg);
+ }
- if (url) {
- posterImg.setAttribute('src', url);
- posterDiv.style.backgroundImage = 'url("' + url + '")';
- posterDiv.style.display = '';
- } else if (posterImg) {
- posterDiv.style.backgroundImage = 'none';
- posterDiv.style.display = 'none';
- posterImg.remove();
- } else {
- posterDiv.style.display = 'none';
+ if (url) {
+ posterImg.setAttribute('src', url);
+ posterDiv.style.backgroundImage = 'url("' + url + '")';
+ posterDiv.style.display = '';
+ } else if (posterImg) {
+ posterDiv.style.backgroundImage = 'none';
+ posterDiv.style.display = 'none';
+ posterImg.remove();
+ } else {
+ posterDiv.style.display = 'none';
+ }
+ } else if (_constants.IS_IPAD && t.options.iPadUseNativeControls || _constants.IS_IPHONE && t.options.iPhoneUseNativeControls || _constants.IS_ANDROID && t.options.AndroidUseNativeControls) {
+ t.media.originalNode.poster = url;
}
}
}, {
@@ -4615,7 +4748,7 @@ var MediaElementPlayer = function () {
value: function changeSkin(className) {
var t = this;
- t.container.className = t.options.classPrefix + 'container ' + className;
+ t.getElement(t.container).className = t.options.classPrefix + 'container ' + className;
t.setPlayerSize(t.width, t.height);
t.setControlsSize();
}
@@ -4671,6 +4804,22 @@ var MediaElementPlayer = function () {
}
}
}
+ }, {
+ key: 'buildfeatures',
+ value: function buildfeatures(player, controls, layers, media) {
+ var t = this;
+
+ for (var i = 0, total = t.options.features.length; i < total; i++) {
+ var feature = t.options.features[i];
+ if (t['build' + feature]) {
+ try {
+ t['build' + feature](player, controls, layers, media);
+ } catch (e) {
+ console.error('error building ' + feature, e);
+ }
+ }
+ }
+ }
}, {
key: 'buildposter',
value: function buildposter(player, controls, layers, media) {
@@ -4682,8 +4831,10 @@ var MediaElementPlayer = function () {
var posterUrl = media.originalNode.getAttribute('poster');
- if (player.options.poster !== '' && posterUrl && _constants.IS_IOS) {
- media.originalNode.removeAttribute('poster');
+ if (player.options.poster !== '') {
+ if (posterUrl && _constants.IS_IOS) {
+ media.originalNode.removeAttribute('poster');
+ }
posterUrl = player.options.poster;
}
@@ -4732,8 +4883,7 @@ var MediaElementPlayer = function () {
var t = this,
loading = _document2.default.createElement('div'),
error = _document2.default.createElement('div'),
- bigPlay = _document2.default.createElement('div'),
- buffer = controls.querySelector('.' + t.options.classPrefix + 'time-buffering');
+ bigPlay = _document2.default.createElement('div');
loading.style.display = 'none';
loading.className = t.options.classPrefix + 'overlay ' + t.options.classPrefix + 'layer';
@@ -4750,7 +4900,7 @@ var MediaElementPlayer = function () {
bigPlay.addEventListener('click', function () {
if (t.options.clickToPlayPause) {
- var button = t.container.querySelector('.' + t.options.classPrefix + 'overlay-button'),
+ var button = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'overlay-button'),
pressed = button.getAttribute('aria-pressed');
if (t.paused) {
@@ -4760,7 +4910,7 @@ var MediaElementPlayer = function () {
}
button.setAttribute('aria-pressed', !!pressed);
- t.container.focus();
+ t.getElement(t.container).focus();
}
});
@@ -4785,35 +4935,23 @@ var MediaElementPlayer = function () {
media.addEventListener('play', function () {
bigPlay.style.display = 'none';
loading.style.display = 'none';
- if (buffer !== null) {
- buffer.style.display = 'none';
- }
error.style.display = 'none';
hasError = false;
});
media.addEventListener('playing', function () {
bigPlay.style.display = 'none';
loading.style.display = 'none';
- if (buffer !== null) {
- buffer.style.display = 'none';
- }
error.style.display = 'none';
hasError = false;
});
media.addEventListener('seeking', function () {
bigPlay.style.display = 'none';
loading.style.display = '';
- if (buffer !== null) {
- buffer.style.display = '';
- }
hasError = false;
});
media.addEventListener('seeked', function () {
bigPlay.style.display = t.paused && !_constants.IS_STOCK_ANDROID ? '' : 'none';
loading.style.display = 'none';
- if (buffer !== null) {
- buffer.style.display = 'none';
- }
hasError = false;
});
media.addEventListener('pause', function () {
@@ -4821,24 +4959,15 @@ var MediaElementPlayer = function () {
if (!_constants.IS_STOCK_ANDROID && !hasError) {
bigPlay.style.display = '';
}
- if (buffer !== null) {
- buffer.style.display = 'none';
- }
hasError = false;
});
media.addEventListener('waiting', function () {
loading.style.display = '';
- if (buffer !== null) {
- buffer.style.display = '';
- }
hasError = false;
});
media.addEventListener('loadeddata', function () {
loading.style.display = '';
- if (buffer !== null) {
- buffer.style.display = '';
- }
if (_constants.IS_ANDROID) {
media.canplayTimeout = setTimeout(function () {
@@ -4853,9 +4982,6 @@ var MediaElementPlayer = function () {
});
media.addEventListener('canplay', function () {
loading.style.display = 'none';
- if (buffer !== null) {
- buffer.style.display = 'none';
- }
clearTimeout(media.canplayTimeout);
hasError = false;
@@ -4865,12 +4991,15 @@ var MediaElementPlayer = function () {
t._handleError(e, t.media, t.node);
loading.style.display = 'none';
bigPlay.style.display = 'none';
- if (buffer !== null) {
- buffer.style.display = 'none';
- }
hasError = true;
});
+ media.addEventListener('loadedmetadata', function () {
+ if (!t.controlsEnabled) {
+ t.enableControls();
+ }
+ });
+
media.addEventListener('keydown', function (e) {
t.onkeydown(player, media, e);
hasError = false;
@@ -4882,7 +5011,7 @@ var MediaElementPlayer = function () {
var t = this;
- t.container.addEventListener('keydown', function () {
+ t.getElement(t.container).addEventListener('keydown', function () {
t.keyboardAction = true;
});
@@ -4914,6 +5043,7 @@ var MediaElementPlayer = function () {
keyAction.action(player, media, e.keyCode, e);
e.preventDefault();
e.stopPropagation();
+ return;
}
}
}
@@ -4995,7 +5125,7 @@ var MediaElementPlayer = function () {
var feature = t.options.features[featureIndex];
if (t['clean' + feature]) {
try {
- t['clean' + feature](t, t.layers, t.controls, t.media);
+ t['clean' + feature](t, t.getElement(t.layers), t.getElement(t.controls), t.media);
} catch (e) {
console.error('error cleaning ' + feature, e);
}
@@ -5024,11 +5154,13 @@ var MediaElementPlayer = function () {
t.node.style.width = nativeWidth;
t.node.style.height = nativeHeight;
+ t.setPlayerSize(0, 0);
+
if (!t.isDynamic) {
(function () {
t.node.setAttribute('controls', true);
t.node.setAttribute('id', t.node.getAttribute('id').replace('_' + rendererName, '').replace('_from_mejs', ''));
- var poster = t.container.querySelector('.' + t.options.classPrefix + 'poster>img');
+ var poster = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'poster>img');
if (poster) {
t.node.setAttribute('poster', poster.src);
}
@@ -5046,7 +5178,7 @@ var MediaElementPlayer = function () {
var node = t.node.cloneNode();
node.style.display = '';
- t.container.parentNode.insertBefore(node, t.container);
+ t.getElement(t.container).parentNode.insertBefore(node, t.getElement(t.container));
t.node.remove();
if (t.mediaFiles) {
@@ -5083,7 +5215,7 @@ var MediaElementPlayer = function () {
delete t.trackFiles;
})();
} else {
- t.container.parentNode.insertBefore(t.node, t.container);
+ t.getElement(t.container).parentNode.insertBefore(t.node, t.getElement(t.container));
}
if (typeof t.media.renderer.destroy === 'function') {
@@ -5092,10 +5224,10 @@ var MediaElementPlayer = function () {
delete _mejs2.default.players[t.id];
- if (_typeof(t.container) === 'object') {
- var offscreen = t.container.parentNode.querySelector('.' + t.options.classPrefix + 'offscreen');
+ if (_typeof(t.getElement(t.container)) === 'object') {
+ var offscreen = t.getElement(t.container).parentNode.querySelector('.' + t.options.classPrefix + 'offscreen');
offscreen.remove();
- t.container.remove();
+ t.getElement(t.container).remove();
}
t.globalUnbind('resize', t.globalResizeCallback);
t.globalUnbind('keydown', t.globalKeydownCallback);
@@ -5161,6 +5293,7 @@ var MediaElementPlayer = function () {
}();
_window2.default.MediaElementPlayer = MediaElementPlayer;
+_mejs2.default.MediaElementPlayer = MediaElementPlayer;
exports.default = MediaElementPlayer;
@@ -5477,12 +5610,12 @@ var DashNativeRenderer = {
options = Object.assign(options, mediaElement.options);
var props = _mejs2.default.html5media.properties,
- events = _mejs2.default.html5media.events.concat(['click', 'mouseover', 'mouseout']),
+ events = _mejs2.default.html5media.events.concat(['click', 'mouseover', 'mouseout']).filter(function (e) {
+ return e !== 'error';
+ }),
attachNativeEvents = function attachNativeEvents(e) {
- if (e.type !== 'error') {
- var _event = (0, _general.createEvent)(e.type, mediaElement);
- mediaElement.dispatchEvent(_event);
- }
+ var event = (0, _general.createEvent)(e.type, mediaElement);
+ mediaElement.dispatchEvent(event);
},
assignGettersSetters = function assignGettersSetters(propName) {
var capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
@@ -5557,25 +5690,21 @@ var DashNativeRenderer = {
assignEvents(events[_i3]);
}
- var assignMdashEvents = function assignMdashEvents(name, data) {
- if (name.toLowerCase() === 'error') {
- mediaElement.generateError(data.message, node.src);
- console.error(data);
+ var assignMdashEvents = function assignMdashEvents(e) {
+ if (e.type.toLowerCase() === 'error') {
+ mediaElement.generateError(e.message, node.src);
+ console.error(e);
} else {
- var _event2 = (0, _general.createEvent)(name, mediaElement);
- _event2.data = data;
- mediaElement.dispatchEvent(_event2);
+ var _event = (0, _general.createEvent)(e.type, mediaElement);
+ _event.data = e;
+ mediaElement.dispatchEvent(_event);
}
};
for (var eventType in dashEvents) {
if (dashEvents.hasOwnProperty(eventType)) {
dashPlayer.on(dashEvents[eventType], function (e) {
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- return assignMdashEvents(e.type, args);
+ return assignMdashEvents(e);
});
}
}
@@ -5733,6 +5862,7 @@ var FlashMediaElementRenderer = {
create: function create(mediaElement, options, mediaFiles) {
var flash = {};
+ var isActive = false;
flash.options = options;
flash.id = mediaElement.id + '_' + flash.options.prefix;
@@ -5800,21 +5930,23 @@ var FlashMediaElementRenderer = {
var methods = _mejs2.default.html5media.methods,
assignMethods = function assignMethods(methodName) {
flash[methodName] = function () {
- if (flash.flashApi !== null) {
- if (flash.flashApi['fire_' + methodName]) {
- try {
- flash.flashApi['fire_' + methodName]();
- } catch (e) {
+ if (isActive) {
+ if (flash.flashApi !== null) {
+ if (flash.flashApi['fire_' + methodName]) {
+ try {
+ flash.flashApi['fire_' + methodName]();
+ } catch (e) {
+
+ }
+ } else {
}
} else {
-
+ flash.flashApiStack.push({
+ type: 'call',
+ methodName: methodName
+ });
}
- } else {
- flash.flashApiStack.push({
- type: 'call',
- methodName: methodName
- });
}
};
};
@@ -5886,16 +6018,28 @@ var FlashMediaElementRenderer = {
flashVars.push('pseudostreamtype=' + flash.options.pseudoStreamingType);
}
+ if (flash.options.streamDelimiter) {
+ flashVars.push('streamdelimiter=' + encodeURIComponent(flash.options.streamDelimiter));
+ }
+
+ if (flash.options.proxyType) {
+ flashVars.push('proxytype=' + flash.options.proxyType);
+ }
+
mediaElement.appendChild(flash.flashWrapper);
mediaElement.originalNode.style.display = 'none';
var settings = [];
- if (_constants.IS_IE) {
+ if (_constants.IS_IE || _constants.IS_EDGE) {
var specialIEContainer = _document2.default.createElement('div');
flash.flashWrapper.appendChild(specialIEContainer);
- settings = ['classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"', 'codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"', 'id="__' + flash.id + '"', 'width="' + flashWidth + '"', 'height="' + flashHeight + '"'];
+ if (_constants.IS_EDGE) {
+ settings = ['type="application/x-shockwave-flash"', 'data="' + flash.options.pluginPath + flash.options.filename + '"', 'id="__' + flash.id + '"', 'width="' + flashWidth + '"', 'height="' + flashHeight + '\'"'];
+ } else {
+ settings = ['classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"', 'codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"', 'id="__' + flash.id + '"', 'width="' + flashWidth + '"', 'height="' + flashHeight + '"'];
+ }
if (!isVideo) {
settings.push('style="clip: rect(0 0 0 0); position: absolute;"');
@@ -5904,10 +6048,13 @@ var FlashMediaElementRenderer = {
specialIEContainer.outerHTML = '';
} else {
- settings = ['id="__' + flash.id + '"', 'name="__' + flash.id + '"', 'play="true"', 'loop="false"', 'quality="high"', 'bgcolor="#000000"', 'wmode="transparent"', 'allowScriptAccess="' + flash.options.shimScriptAccess + '"', 'allowFullScreen="true"', 'type="application/x-shockwave-flash"', 'pluginspage="//www.macromedia.com/go/getflashplayer"', 'src="' + flash.options.pluginPath + flash.options.filename + '"', 'flashvars="' + flashVars.join('&') + '"', 'width="' + flashWidth + '"', 'height="' + flashHeight + '"'];
+ settings = ['id="__' + flash.id + '"', 'name="__' + flash.id + '"', 'play="true"', 'loop="false"', 'quality="high"', 'bgcolor="#000000"', 'wmode="transparent"', 'allowScriptAccess="' + flash.options.shimScriptAccess + '"', 'allowFullScreen="true"', 'type="application/x-shockwave-flash"', 'pluginspage="//www.macromedia.com/go/getflashplayer"', 'src="' + flash.options.pluginPath + flash.options.filename + '"', 'flashvars="' + flashVars.join('&') + '"'];
- if (!isVideo) {
- settings.push('style="clip: rect(0 0 0 0); position: absolute;"');
+ if (isVideo) {
+ settings.push('width="' + flashWidth + '"');
+ settings.push('height="' + flashHeight + '"');
+ } else {
+ settings.push('style="position: fixed; left: -9999em; top: -9999em;"');
}
flash.flashWrapper.innerHTML = '