Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

mediaelement

Package Overview
Dependencies
Maintainers
2
Versions
71
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mediaelement - npm Package Compare versions

Comparing version 4.2.5 to 4.2.6

338

build/renderers/facebook.js

@@ -14,2 +14,26 @@ /*!

var FacebookApi = {
promise: null,
load: function load(settings) {
if (typeof FB !== 'undefined') {
FacebookApi._createPlayer(settings);
} else {
FacebookApi.promise = FacebookApi.promise || mejs.Utils.loadScript('https://connect.facebook.net/' + settings.options.lang + '/sdk.js');
FacebookApi.promise.then(function () {
FB.init(settings.options);
setTimeout(function () {
FacebookApi._createPlayer(settings);
}, 50);
});
}
},
_createPlayer: function _createPlayer(settings) {
window['__ready__' + settings.id]();
}
};
var FacebookRenderer = {

@@ -22,3 +46,4 @@ name: 'facebook',

xfbml: true,
version: 'v2.10'
version: 'v2.10',
lang: 'en_US'
}

@@ -32,17 +57,18 @@ },

create: function create(mediaElement, options, mediaFiles) {
var apiStack = [],
fb = {},
readyState = 4;
var fbWrapper = {},
apiStack = [],
eventHandler = {},
readyState = 4,
autoplay = mediaElement.originalNode.autoplay;
var poster = '',
src = '',
var hasStartedPlaying = false,
paused = true,
ended = false,
hasStartedPlaying = false,
fbApi = null,
fbDiv = null;
fbPlayer = null,
src = '',
poster = '',
autoplay = mediaElement.originalNode.autoplay;
fb.options = options;
fb.id = mediaElement.id + '_' + options.prefix;
fb.mediaElement = mediaElement;
if (mejs.Features.isiPhone && mediaElement.originalNode.getAttribute('poster')) {

@@ -53,7 +79,2 @@ poster = mediaElement.originalNode.getAttribute('poster');

options = Object.assign(options, mediaElement.options);
fbWrapper.options = options;
fbWrapper.id = mediaElement.id + '_' + options.prefix;
fbWrapper.mediaElement = mediaElement;
var props = mejs.html5media.properties,

@@ -64,5 +85,5 @@ assignGettersSetters = function assignGettersSetters(propName) {

fbWrapper['get' + capName] = function () {
fb['get' + capName] = function () {
if (fbApi !== null) {
if (fbPlayer !== null) {
var value = null;

@@ -72,7 +93,7 @@

case 'currentTime':
return fbApi.getCurrentPosition();
return fbPlayer.getCurrentPosition();
case 'duration':
return fbApi.getDuration();
return fbPlayer.getDuration();
case 'volume':
return fbApi.getVolume();
return fbPlayer.getVolume();
case 'paused':

@@ -83,3 +104,3 @@ return paused;

case 'muted':
return fbApi.isMuted();
return fbPlayer.isMuted();
case 'buffered':

@@ -107,5 +128,5 @@ return {

fbWrapper['set' + capName] = function (value) {
fb['set' + capName] = function (value) {
if (fbApi !== null) {
if (fbPlayer !== null) {

@@ -115,24 +136,37 @@ switch (propName) {

var url = typeof value === 'string' ? value : value[0].src;
src = url;
fbDiv.remove();
createFacebookEmbed(url, options.facebook);
fbContainer.remove();
fbContainer = document.createElement('div');
fbContainer.id = fb.id;
fbContainer.className = 'fb-video';
fbContainer.setAttribute('data-href', url);
fbContainer.setAttribute('data-allowfullscreen', 'true');
fbContainer.setAttribute('data-controls', 'false');
mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
FacebookApi.load({
lang: fb.options.lang,
id: fb.id
});
FB.XFBML.parse();
if (autoplay) {
fbApi.play();
fbPlayer.play();
}
break;
case 'currentTime':
fbApi.seek(value);
fbPlayer.seek(value);
break;
case 'muted':
if (value) {
fbApi.mute();
fbPlayer.mute();
} else {
fbApi.unmute();
fbPlayer.unmute();
}
setTimeout(function () {
var event = mejs.Utils.createEvent('volumechange', fbWrapper);
var event = mejs.Utils.createEvent('volumechange', fb);
mediaElement.dispatchEvent(event);

@@ -142,5 +176,5 @@ }, 50);

case 'volume':
fbApi.setVolume(value);
fbPlayer.setVolume(value);
setTimeout(function () {
var event = mejs.Utils.createEvent('volumechange', fbWrapper);
var event = mejs.Utils.createEvent('volumechange', fb);
mediaElement.dispatchEvent(event);

@@ -150,3 +184,3 @@ }, 50);

case 'readyState':
var event = mejs.Utils.createEvent('canplay', fbWrapper);
var event = mejs.Utils.createEvent('canplay', fb);
mediaElement.dispatchEvent(event);

@@ -170,9 +204,9 @@ break;

assignMethods = function assignMethods(methodName) {
fbWrapper[methodName] = function () {
if (fbApi !== null) {
fb[methodName] = function () {
if (fbPlayer !== null) {
switch (methodName) {
case 'play':
return fbApi.play();
return fbPlayer.play();
case 'pause':
return fbApi.pause();
return fbPlayer.pause();
case 'load':

@@ -191,5 +225,5 @@ return null;

function sendEvents(events) {
function assignEvents(events) {
for (var _i2 = 0, _total2 = events.length; _i2 < _total2; _i2++) {
var event = mejs.Utils.createEvent(events[_i2], fbWrapper);
var event = mejs.Utils.createEvent(events[_i2], fb);
mediaElement.dispatchEvent(event);

@@ -199,134 +233,126 @@ }

function createFacebookEmbed(url, config) {
src = url;
window['__ready__' + fb.id] = function () {
FB.Event.subscribe('xfbml.ready', function (msg) {
if (msg.type === 'video' && fb.id === msg.id) {
mediaElement.fbPlayer = fbPlayer = msg.instance;
fbDiv = document.createElement('div');
fbDiv.id = fbWrapper.id;
fbDiv.className = "fb-video";
fbDiv.setAttribute("data-href", url);
fbDiv.setAttribute("data-allowfullscreen", "true");
fbDiv.setAttribute("data-controls", "false");
var fbIframe = document.getElementById(fb.id),
width = fbIframe.offsetWidth,
height = fbIframe.offsetHeight,
events = ['mouseover', 'mouseout'],
assignIframeEvents = function assignIframeEvents(e) {
var event = mejs.Utils.createEvent(e.type, fb);
mediaElement.dispatchEvent(event);
};
mediaElement.originalNode.parentNode.insertBefore(fbDiv, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
fb.setSize(width, height);
fbPlayer.unmute();
window.fbAsyncInit = function () {
if (autoplay) {
fbPlayer.play();
}
FB.init(config);
for (var _i3 = 0, _total3 = events.length; _i3 < _total3; _i3++) {
fbIframe.addEventListener(events[_i3], assignIframeEvents);
}
FB.Event.subscribe('xfbml.ready', function (msg) {
fb.eventHandler = {};
if (msg.type === 'video') {
var fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
for (var _i4 = 0, _total4 = fbEvents.length; _i4 < _total4; _i4++) {
var event = fbEvents[_i4],
handler = fb.eventHandler[event];
if (handler !== undefined && handler !== null && !mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
handler.removeListener(event);
}
}
fbApi = msg.instance;
if (apiStack.length) {
for (var _i5 = 0, _total5 = apiStack.length; _i5 < _total5; _i5++) {
var stackItem = apiStack[_i5];
var fbIframe = fbDiv.getElementsByTagName('iframe')[0],
width = fbIframe.offsetWidth,
height = fbIframe.offsetHeight,
events = ['mouseover', 'mouseout'],
assignEvents = function assignEvents(e) {
var event = mejs.Utils.createEvent(e.type, fbWrapper);
mediaElement.dispatchEvent(event);
};
if (stackItem.type === 'set') {
var propName = stackItem.propName,
capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
fbWrapper.setSize(width, height);
if (autoplay) {
fbApi.play();
}
for (var _i3 = 0, _total3 = events.length; _i3 < _total3; _i3++) {
fbIframe.addEventListener(events[_i3], assignEvents, false);
}
var fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
for (var _i4 = 0, _total4 = fbEvents.length; _i4 < _total4; _i4++) {
var event = fbEvents[_i4],
handler = eventHandler[event];
if (handler !== undefined && handler !== null && !mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
handler.removeListener(event);
fb['set' + capName](stackItem.value);
} else if (stackItem.type === 'call') {
fb[stackItem.methodName]();
}
}
}
if (apiStack.length) {
for (var _i5 = 0, _total5 = apiStack.length; _i5 < _total5; _i5++) {
assignEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);
var stackItem = apiStack[_i5];
var timer = void 0;
if (stackItem.type === 'set') {
var propName = stackItem.propName,
capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
fbWrapper['set' + capName](stackItem.value);
} else if (stackItem.type === 'call') {
fbWrapper[stackItem.methodName]();
}
}
fb.eventHandler.startedPlaying = fbPlayer.subscribe('startedPlaying', function () {
if (!hasStartedPlaying) {
hasStartedPlaying = true;
}
paused = false;
ended = false;
assignEvents(['play', 'playing', 'timeupdate']);
sendEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);
timer = setInterval(function () {
fbPlayer.getCurrentPosition();
assignEvents(['timeupdate']);
}, 250);
});
fb.eventHandler.paused = fbPlayer.subscribe('paused', function () {
paused = true;
ended = false;
assignEvents(['pause']);
});
fb.eventHandler.finishedPlaying = fbPlayer.subscribe('finishedPlaying', function () {
paused = true;
ended = true;
var timer = void 0;
assignEvents(['ended']);
clearInterval(timer);
timer = null;
});
fb.eventHandler.startedBuffering = fbPlayer.subscribe('startedBuffering', function () {
assignEvents(['progress', 'timeupdate']);
});
fb.eventHandler.finishedBuffering = fbPlayer.subscribe('finishedBuffering', function () {
assignEvents(['progress', 'timeupdate']);
});
}
});
};
eventHandler.startedPlaying = fbApi.subscribe('startedPlaying', function () {
if (!hasStartedPlaying) {
hasStartedPlaying = true;
}
paused = false;
ended = false;
sendEvents(['play', 'playing', 'timeupdate']);
src = mediaFiles[0].src;
var fbContainer = document.createElement('div');
fbContainer.id = fb.id;
fbContainer.className = 'fb-video';
fbContainer.setAttribute('data-href', src);
fbContainer.setAttribute('data-allowfullscreen', 'true');
fbContainer.setAttribute('data-controls', 'false');
mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
timer = setInterval(function () {
fbApi.getCurrentPosition();
sendEvents(['timeupdate']);
}, 250);
});
eventHandler.paused = fbApi.subscribe('paused', function () {
paused = true;
ended = false;
sendEvents(['pause']);
});
eventHandler.finishedPlaying = fbApi.subscribe('finishedPlaying', function () {
paused = true;
ended = true;
FacebookApi.load({
options: fb.options.facebook,
id: fb.id
});
sendEvents(['ended']);
clearInterval(timer);
timer = null;
});
eventHandler.startedBuffering = fbApi.subscribe('startedBuffering', function () {
sendEvents(['progress', 'timeupdate']);
});
eventHandler.finishedBuffering = fbApi.subscribe('finishedBuffering', function () {
sendEvents(['progress', 'timeupdate']);
});
}
});
};
mejs.Utils.loadScript('https://connect.facebook.net/en_US/sdk.js');
}
if (mediaFiles.length > 0) {
createFacebookEmbed(mediaFiles[0].src, fbWrapper.options.facebook);
}
fbWrapper.hide = function () {
fbWrapper.stopInterval();
fbWrapper.pause();
if (fbDiv) {
fbDiv.style.display = 'none';
fb.hide = function () {
fb.pause();
if (fbPlayer) {
fbContainer.style.display = 'none';
}
};
fbWrapper.show = function () {
if (fbDiv) {
fbDiv.style.display = '';
fb.setSize = function (width) {
if (fbPlayer !== null && !isNaN(width)) {
fbContainer.style.width = width;
}
};
fbWrapper.setSize = function (width) {
if (fbApi !== null && !isNaN(width)) {
fbDiv.style.width = width;
fb.show = function () {
if (fbPlayer) {
fbContainer.style.display = '';
}
};
fbWrapper.destroy = function () {
fb.destroy = function () {
if (poster) {

@@ -337,17 +363,3 @@ mediaElement.originalNode.setAttribute('poster', poster);

fbWrapper.interval = null;
fbWrapper.startInterval = function () {
fbWrapper.interval = setInterval(function () {
var event = mejs.Utils.createEvent('timeupdate', fbWrapper);
mediaElement.dispatchEvent(event);
}, 250);
};
fbWrapper.stopInterval = function () {
if (fbWrapper.interval) {
clearInterval(fbWrapper.interval);
}
};
return fbWrapper;
return fb;
}

@@ -354,0 +366,0 @@ };

2

build/renderers/facebook.min.js

@@ -12,2 +12,2 @@ /*!

*/
!function e(t,n,r){function i(s,o){if(!n[s]){if(!t[s]){var u="function"==typeof require&&require;if(!o&&u)return u(s,!0);if(a)return a(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var c=n[s]={exports:{}};t[s][0].call(c.exports,function(e){var n=t[s][1][e];return i(n||e)},c,c.exports,e,t,n,r)}return n[s].exports}for(var a="function"==typeof require&&require,s=0;s<r.length;s++)i(r[s]);return i}({1:[function(e,t,n){"use strict";var r={name:"facebook",options:{prefix:"facebook",facebook:{appId:"",xfbml:!0,version:"v2.10"}},canPlayType:function(e){return~["video/facebook","video/x-facebook"].indexOf(e.toLowerCase())},create:function(e,t,n){function r(t){for(var n=0,r=t.length;n<r;n++){var i=mejs.Utils.createEvent(t[n],a);e.dispatchEvent(i)}}function i(t,n){c=t,(m=document.createElement("div")).id=a.id,m.className="fb-video",m.setAttribute("data-href",t),m.setAttribute("data-allowfullscreen","true"),m.setAttribute("data-controls","false"),e.originalNode.parentNode.insertBefore(m,e.originalNode),e.originalNode.style.display="none",window.fbAsyncInit=function(){FB.init(n),FB.Event.subscribe("xfbml.ready",function(t){if("video"===t.type){v=t.instance;var n=m.getElementsByTagName("iframe")[0],i=n.offsetWidth,l=n.offsetHeight,c=["mouseover","mouseout"];a.setSize(i,l),u&&v.play();for(var g=0,h=c.length;g<h;g++)n.addEventListener(c[g],function(t){var n=mejs.Utils.createEvent(t.type,a);e.dispatchEvent(n)},!1);for(var b=["startedPlaying","paused","finishedPlaying","startedBuffering","finishedBuffering"],y=0,E=b.length;y<E;y++){var N=b[y],k=o[N];void 0===k||null===k||mejs.Utils.isObjectEmpty(k)||"function"!=typeof k.removeListener||k.removeListener(N)}if(s.length)for(var j=0,w=s.length;j<w;j++){var U=s[j];if("set"===U.type){var x=U.propName,B=""+x.substring(0,1).toUpperCase()+x.substring(1);a["set"+B](U.value)}else"call"===U.type&&a[U.methodName]()}r(["rendererready","loadeddata","canplay","progress","loadedmetadata","timeupdate"]);var P=void 0;o.startedPlaying=v.subscribe("startedPlaying",function(){p||(p=!0),f=!1,d=!1,r(["play","playing","timeupdate"]),P=setInterval(function(){v.getCurrentPosition(),r(["timeupdate"])},250)}),o.paused=v.subscribe("paused",function(){f=!0,d=!1,r(["pause"])}),o.finishedPlaying=v.subscribe("finishedPlaying",function(){f=!0,d=!0,r(["ended"]),clearInterval(P),P=null}),o.startedBuffering=v.subscribe("startedBuffering",function(){r(["progress","timeupdate"])}),o.finishedBuffering=v.subscribe("finishedBuffering",function(){r(["progress","timeupdate"])})}})},mejs.Utils.loadScript("https://connect.facebook.net/en_US/sdk.js")}var a={},s=[],o={},u=e.originalNode.autoplay,l="",c="",f=!0,d=!1,p=!1,v=null,m=null;mejs.Features.isiPhone&&e.originalNode.getAttribute("poster")&&(l=e.originalNode.getAttribute("poster"),e.originalNode.removeAttribute("poster")),t=Object.assign(t,e.options),a.options=t,a.id=e.id+"_"+t.prefix,a.mediaElement=e;for(var g=mejs.html5media.properties,h=0,b=g.length;h<b;h++)!function(n){var r=""+n.substring(0,1).toUpperCase()+n.substring(1);a["get"+r]=function(){if(null!==v){switch(n){case"currentTime":return v.getCurrentPosition();case"duration":return v.getDuration();case"volume":return v.getVolume();case"paused":return f;case"ended":return d;case"muted":return v.isMuted();case"buffered":return{start:function(){return 0},end:function(){return 0},length:1};case"src":return c;case"readyState":return 4}return null}return null},a["set"+r]=function(r){if(null!==v)switch(n){case"src":var o="string"==typeof r?r:r[0].src;m.remove(),i(o,t.facebook),FB.XFBML.parse(),u&&v.play();break;case"currentTime":v.seek(r);break;case"muted":r?v.mute():v.unmute(),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",a);e.dispatchEvent(t)},50);break;case"volume":v.setVolume(r),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",a);e.dispatchEvent(t)},50);break;case"readyState":var l=mejs.Utils.createEvent("canplay",a);e.dispatchEvent(l)}else s.push({type:"set",propName:n,value:r})}}(g[h]);for(var y=mejs.html5media.methods,E=0,N=y.length;E<N;E++)!function(e){a[e]=function(){if(null!==v)switch(e){case"play":return v.play();case"pause":return v.pause();case"load":return null}else s.push({type:"call",methodName:e})}}(y[E]);return n.length>0&&i(n[0].src,a.options.facebook),a.hide=function(){a.stopInterval(),a.pause(),m&&(m.style.display="none")},a.show=function(){m&&(m.style.display="")},a.setSize=function(e){null===v||isNaN(e)||(m.style.width=e)},a.destroy=function(){l&&e.originalNode.setAttribute("poster",l)},a.interval=null,a.startInterval=function(){a.interval=setInterval(function(){var t=mejs.Utils.createEvent("timeupdate",a);e.dispatchEvent(t)},250)},a.stopInterval=function(){a.interval&&clearInterval(a.interval)},a}};mejs.Utils.typeChecks.push(function(e){return~e.toLowerCase().indexOf("//www.facebook")?"video/x-facebook":null}),mejs.Renderers.add(r)},{}]},{},[1]);
!function e(t,n,r){function i(o,s){if(!n[o]){if(!t[o]){var u="function"==typeof require&&require;if(!s&&u)return u(o,!0);if(a)return a(o,!0);var l=new Error("Cannot find module '"+o+"'");throw l.code="MODULE_NOT_FOUND",l}var d=n[o]={exports:{}};t[o][0].call(d.exports,function(e){var n=t[o][1][e];return i(n||e)},d,d.exports,e,t,n,r)}return n[o].exports}for(var a="function"==typeof require&&require,o=0;o<r.length;o++)i(r[o]);return i}({1:[function(e,t,n){"use strict";var r={promise:null,load:function(e){"undefined"!=typeof FB?r._createPlayer(e):(r.promise=r.promise||mejs.Utils.loadScript("https://connect.facebook.net/"+e.options.lang+"/sdk.js"),r.promise.then(function(){FB.init(e.options),setTimeout(function(){r._createPlayer(e)},50)}))},_createPlayer:function(e){window["__ready__"+e.id]()}},i={name:"facebook",options:{prefix:"facebook",facebook:{appId:"",xfbml:!0,version:"v2.10",lang:"en_US"}},canPlayType:function(e){return~["video/facebook","video/x-facebook"].indexOf(e.toLowerCase())},create:function(e,t,n){function i(t){for(var n=0,r=t.length;n<r;n++){var i=mejs.Utils.createEvent(t[n],o);e.dispatchEvent(i)}}var a=[],o={},s=!1,u=!0,l=!1,d=null,c="",f="",p=e.originalNode.autoplay;o.options=t,o.id=e.id+"_"+t.prefix,o.mediaElement=e,mejs.Features.isiPhone&&e.originalNode.getAttribute("poster")&&(f=e.originalNode.getAttribute("poster"),e.originalNode.removeAttribute("poster"));for(var m=mejs.html5media.properties,v=0,g=m.length;v<g;v++)!function(t){var n=""+t.substring(0,1).toUpperCase()+t.substring(1);o["get"+n]=function(){if(null!==d){switch(t){case"currentTime":return d.getCurrentPosition();case"duration":return d.getDuration();case"volume":return d.getVolume();case"paused":return u;case"ended":return l;case"muted":return d.isMuted();case"buffered":return{start:function(){return 0},end:function(){return 0},length:1};case"src":return c;case"readyState":return 4}return null}return null},o["set"+n]=function(n){if(null!==d)switch(t){case"src":var i="string"==typeof n?n:n[0].src;c=i,N.remove(),(N=document.createElement("div")).id=o.id,N.className="fb-video",N.setAttribute("data-href",i),N.setAttribute("data-allowfullscreen","true"),N.setAttribute("data-controls","false"),e.originalNode.parentNode.insertBefore(N,e.originalNode),e.originalNode.style.display="none",r.load({lang:o.options.lang,id:o.id}),FB.XFBML.parse(),p&&d.play();break;case"currentTime":d.seek(n);break;case"muted":n?d.mute():d.unmute(),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",o);e.dispatchEvent(t)},50);break;case"volume":d.setVolume(n),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",o);e.dispatchEvent(t)},50);break;case"readyState":var s=mejs.Utils.createEvent("canplay",o);e.dispatchEvent(s)}else a.push({type:"set",propName:t,value:n})}}(m[v]);for(var y=mejs.html5media.methods,b=0,h=y.length;b<h;b++)!function(e){o[e]=function(){if(null!==d)switch(e){case"play":return d.play();case"pause":return d.pause();case"load":return null}else a.push({type:"call",methodName:e})}}(y[b]);window["__ready__"+o.id]=function(){FB.Event.subscribe("xfbml.ready",function(t){if("video"===t.type&&o.id===t.id){e.fbPlayer=d=t.instance;var n=document.getElementById(o.id),r=n.offsetWidth,c=n.offsetHeight,f=["mouseover","mouseout"];o.setSize(r,c),d.unmute(),p&&d.play();for(var m=0,v=f.length;m<v;m++)n.addEventListener(f[m],function(t){var n=mejs.Utils.createEvent(t.type,o);e.dispatchEvent(n)});o.eventHandler={};for(var g=["startedPlaying","paused","finishedPlaying","startedBuffering","finishedBuffering"],y=0,b=g.length;y<b;y++){var h=g[y],N=o.eventHandler[h];void 0===N||null===N||mejs.Utils.isObjectEmpty(N)||"function"!=typeof N.removeListener||N.removeListener(h)}if(a.length)for(var E=0,w=a.length;E<w;E++){var k=a[E];if("set"===k.type){var _=k.propName,j=""+_.substring(0,1).toUpperCase()+_.substring(1);o["set"+j](k.value)}else"call"===k.type&&o[k.methodName]()}i(["rendererready","loadeddata","canplay","progress","loadedmetadata","timeupdate"]);var B=void 0;o.eventHandler.startedPlaying=d.subscribe("startedPlaying",function(){s||(s=!0),u=!1,l=!1,i(["play","playing","timeupdate"]),B=setInterval(function(){d.getCurrentPosition(),i(["timeupdate"])},250)}),o.eventHandler.paused=d.subscribe("paused",function(){u=!0,l=!1,i(["pause"])}),o.eventHandler.finishedPlaying=d.subscribe("finishedPlaying",function(){u=!0,l=!0,i(["ended"]),clearInterval(B),B=null}),o.eventHandler.startedBuffering=d.subscribe("startedBuffering",function(){i(["progress","timeupdate"])}),o.eventHandler.finishedBuffering=d.subscribe("finishedBuffering",function(){i(["progress","timeupdate"])})}})},c=n[0].src;var N=document.createElement("div");return N.id=o.id,N.className="fb-video",N.setAttribute("data-href",c),N.setAttribute("data-allowfullscreen","true"),N.setAttribute("data-controls","false"),e.originalNode.parentNode.insertBefore(N,e.originalNode),e.originalNode.style.display="none",r.load({options:o.options.facebook,id:o.id}),o.hide=function(){o.pause(),d&&(N.style.display="none")},o.setSize=function(e){null===d||isNaN(e)||(N.style.width=e)},o.show=function(){d&&(N.style.display="")},o.destroy=function(){f&&e.originalNode.setAttribute("poster",f)},o}};mejs.Utils.typeChecks.push(function(e){return~e.toLowerCase().indexOf("//www.facebook")?"video/x-facebook":null}),mejs.Renderers.add(i)},{}]},{},[1]);

16

build/renderers/twitch.js

@@ -65,6 +65,6 @@ /*!

var paramParts = parameters[i].split('=');
if (~paramParts[0].indexOf('channel=')) {
if (~paramParts[0].indexOf('channel')) {
twitchId = paramParts[1];
break;
} else if (~paramParts[0].indexOf('video=')) {
} else if (~paramParts[0].indexOf('video')) {
twitchId = 'v' + paramParts[1];

@@ -86,3 +86,3 @@ break;

var id = url.substring(url.lastIndexOf('/') + 1);
return (/^\d+$/i.test(id) !== null ? 'v' + id : id
return (/^\d+$/i.test(id) ? 'v' + id : id
);

@@ -92,3 +92,3 @@ },

getTwitchType: function getTwitchType(id) {
return (/^v\d+/i.test(id) !== null ? 'video' : 'channel'
return (/^v\d+/i.test(id) ? 'video' : 'channel'
);

@@ -292,3 +292,3 @@ }

twitchPlayer.addEventListener('ready', function () {
twitchPlayer.addEventListener(Twitch.Player.READY, function () {
paused = false;

@@ -298,3 +298,3 @@ ended = false;

});
twitchPlayer.addEventListener('play', function () {
twitchPlayer.addEventListener(Twitch.Player.PLAY, function () {
if (!hasStartedPlaying) {

@@ -312,3 +312,3 @@ hasStartedPlaying = true;

});
twitchPlayer.addEventListener('pause', function () {
twitchPlayer.addEventListener(Twitch.Player.PAUSE, function () {
paused = true;

@@ -320,3 +320,3 @@ ended = false;

});
twitchPlayer.addEventListener('ended', function () {
twitchPlayer.addEventListener(Twitch.Player.ENDED, function () {
paused = true;

@@ -323,0 +323,0 @@ ended = true;

2

build/renderers/twitch.min.js

@@ -12,2 +12,2 @@ /*!

*/
!function e(t,n,r){function i(s,o){if(!n[s]){if(!t[s]){var u="function"==typeof require&&require;if(!o&&u)return u(s,!0);if(a)return a(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var d=n[s]={exports:{}};t[s][0].call(d.exports,function(e){var n=t[s][1][e];return i(n||e)},d,d.exports,e,t,n,r)}return n[s].exports}for(var a="function"==typeof require&&require,s=0;s<r.length;s++)i(r[s]);return i}({1:[function(e,t,n){"use strict";var r={promise:null,load:function(e){"undefined"!=typeof Twitch?r.promise=new Promise(function(e){e()}).then(function(){r._createPlayer(e)}):(r.promise=r.promise||mejs.Utils.loadScript("https://player.twitch.tv/js/embed/v1.js"),r.promise.then(function(){r._createPlayer(e)}))},_createPlayer:function(e){var t=new Twitch.Player(e.id,e);window["__ready__"+e.id](t)},getTwitchId:function(e){var t="";return e.indexOf("?")>0?""===(t=r.getTwitchIdFromParam(e))&&(t=r.getTwitchIdFromUrl(e)):t=r.getTwitchIdFromUrl(e),t},getTwitchIdFromParam:function(e){if(void 0===e||null===e||!e.trim().length)return null;for(var t=e.split("?")[1].split("&"),n="",r=0,i=t.length;r<i;r++){var a=t[r].split("=");if(~a[0].indexOf("channel=")){n=a[1];break}if(~a[0].indexOf("video=")){n="v"+a[1];break}}return n},getTwitchIdFromUrl:function(e){if(void 0===e||null===e||!e.trim().length)return null;var t=(e=e.split("?")[0]).substring(e.lastIndexOf("/")+1);return null!==/^\d+$/i.test(t)?"v"+t:t},getTwitchType:function(e){return null!==/^v\d+/i.test(e)?"video":"channel"}},i={name:"twitch_iframe",options:{prefix:"twitch_iframe"},canPlayType:function(e){return~["video/twitch","video/x-twitch"].indexOf(e.toLowerCase())},create:function(e,t,n){function i(t){for(var n=0,r=t.length;n<r;n++){var i=mejs.Utils.createEvent(t[n],a);e.dispatchEvent(i)}}var a={},s=[],o=r.getTwitchId(n[0].src),u=null,l=!0,d=!1,c=!1,h=1,f=1/0,p=0;a.options=t,a.id=e.id+"_"+t.prefix,a.mediaElement=e;for(var v=mejs.html5media.properties,m=0,g=v.length;m<g;m++)!function(t){var n=""+t.substring(0,1).toUpperCase()+t.substring(1);a["get"+n]=function(){if(null!==u){switch(t){case"currentTime":return p=u.getCurrentTime();case"duration":return f=u.getDuration();case"volume":return h=u.getVolume();case"paused":return l=u.isPaused();case"ended":return d=u.getEnded();case"muted":return u.getMuted();case"buffered":return{start:function(){return 0},end:function(){return 0},length:1};case"src":return"channel"===r.getTwitchType(o)?u.getChannel():u.getVideo();case"readyState":return 4}return null}return null},a["set"+n]=function(n){if(null!==u)switch(t){case"src":var i="string"==typeof n?n:n[0].src,l=r.getTwitchId(i);"channel"===r.getTwitchType(o)?u.setChannel(l):u.setVideo(l);break;case"currentTime":u.seek(n),setTimeout(function(){var t=mejs.Utils.createEvent("timeupdate",a);e.dispatchEvent(t)},50);break;case"muted":u.setMuted(n),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",a);e.dispatchEvent(t)},50);break;case"volume":h=n,u.setVolume(n),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",a);e.dispatchEvent(t)},50);break;case"readyState":var d=mejs.Utils.createEvent("canplay",a);e.dispatchEvent(d)}else s.push({type:"set",propName:t,value:n})}}(v[m]);for(var y=mejs.html5media.methods,w=0,T=y.length;w<T;w++)!function(e){a[e]=function(){if(null!==u)switch(e){case"play":return l=!1,u.play();case"pause":return l=!0,u.pause();case"load":return null}else s.push({type:"call",methodName:e})}}(y[w]);window["__ready__"+a.id]=function(t){if(e.twitchPlayer=u=t,s.length)for(var n=0,r=s.length;n<r;n++){var o=s[n];if("set"===o.type){var h=o.propName,f=""+h.substring(0,1).toUpperCase()+h.substring(1);a["set"+f](o.value)}else"call"===o.type&&a[o.methodName]()}var p=document.getElementById(a.id).firstChild;p.style.width="100%",p.style.height="100%";for(var v=["mouseover","mouseout"],m=0,g=v.length;m<g;m++)p.addEventListener(v[m],function(t){var n=createEvent(t.type,a);e.dispatchEvent(n)},!1);var y=void 0;u.addEventListener("ready",function(){l=!1,d=!1,i(["rendererready","loadedmetadata","loadeddata","canplay"])}),u.addEventListener("play",function(){c||(c=!0),l=!1,d=!1,i(["play","playing","progress"]),y=setInterval(function(){u.getCurrentTime(),i(["timeupdate"])},250)}),u.addEventListener("pause",function(){l=!0,d=!1,u.getEnded()||i(["pause"])}),u.addEventListener("ended",function(){l=!0,d=!0,i(["ended"]),clearInterval(y),c=!1,y=null})};var E=e.originalNode.height,N=e.originalNode.width,_=document.createElement("div"),b=r.getTwitchType(o),U={id:a.id,width:N,height:E,playsinline:!1,autoplay:e.originalNode.autoplay,muted:e.originalNode.muted};return U[b]=o,_.id=a.id,_.style.width="100%",_.style.height="100%",e.originalNode.parentNode.insertBefore(_,e.originalNode),e.originalNode.style.display="none",e.originalNode.autoplay=!1,a.setSize=function(e,t){null===r||isNaN(e)||isNaN(t)||(_.setAttribute("width",e),_.setAttribute("height",t))},a.hide=function(){a.pause(),_.style.display="none"},a.show=function(){_.style.display=""},a.destroy=function(){},r.load(U),a}};mejs.Utils.typeChecks.push(function(e){return/\/\/(www|player).twitch.tv/i.test(e)?"video/x-twitch":null}),mejs.Renderers.add(i)},{}]},{},[1]);
!function e(t,n,r){function i(o,s){if(!n[o]){if(!t[o]){var u="function"==typeof require&&require;if(!s&&u)return u(o,!0);if(a)return a(o,!0);var l=new Error("Cannot find module '"+o+"'");throw l.code="MODULE_NOT_FOUND",l}var d=n[o]={exports:{}};t[o][0].call(d.exports,function(e){var n=t[o][1][e];return i(n||e)},d,d.exports,e,t,n,r)}return n[o].exports}for(var a="function"==typeof require&&require,o=0;o<r.length;o++)i(r[o]);return i}({1:[function(e,t,n){"use strict";var r={promise:null,load:function(e){"undefined"!=typeof Twitch?r.promise=new Promise(function(e){e()}).then(function(){r._createPlayer(e)}):(r.promise=r.promise||mejs.Utils.loadScript("https://player.twitch.tv/js/embed/v1.js"),r.promise.then(function(){r._createPlayer(e)}))},_createPlayer:function(e){var t=new Twitch.Player(e.id,e);window["__ready__"+e.id](t)},getTwitchId:function(e){var t="";return e.indexOf("?")>0?""===(t=r.getTwitchIdFromParam(e))&&(t=r.getTwitchIdFromUrl(e)):t=r.getTwitchIdFromUrl(e),t},getTwitchIdFromParam:function(e){if(void 0===e||null===e||!e.trim().length)return null;for(var t=e.split("?")[1].split("&"),n="",r=0,i=t.length;r<i;r++){var a=t[r].split("=");if(~a[0].indexOf("channel")){n=a[1];break}if(~a[0].indexOf("video")){n="v"+a[1];break}}return n},getTwitchIdFromUrl:function(e){if(void 0===e||null===e||!e.trim().length)return null;var t=(e=e.split("?")[0]).substring(e.lastIndexOf("/")+1);return/^\d+$/i.test(t)?"v"+t:t},getTwitchType:function(e){return/^v\d+/i.test(e)?"video":"channel"}},i={name:"twitch_iframe",options:{prefix:"twitch_iframe"},canPlayType:function(e){return~["video/twitch","video/x-twitch"].indexOf(e.toLowerCase())},create:function(e,t,n){function i(t){for(var n=0,r=t.length;n<r;n++){var i=mejs.Utils.createEvent(t[n],a);e.dispatchEvent(i)}}var a={},o=[],s=r.getTwitchId(n[0].src),u=null,l=!0,d=!1,c=!1,h=1,f=1/0,p=0;a.options=t,a.id=e.id+"_"+t.prefix,a.mediaElement=e;for(var v=mejs.html5media.properties,m=0,g=v.length;m<g;m++)!function(t){var n=""+t.substring(0,1).toUpperCase()+t.substring(1);a["get"+n]=function(){if(null!==u){switch(t){case"currentTime":return p=u.getCurrentTime();case"duration":return f=u.getDuration();case"volume":return h=u.getVolume();case"paused":return l=u.isPaused();case"ended":return d=u.getEnded();case"muted":return u.getMuted();case"buffered":return{start:function(){return 0},end:function(){return 0},length:1};case"src":return"channel"===r.getTwitchType(s)?u.getChannel():u.getVideo();case"readyState":return 4}return null}return null},a["set"+n]=function(n){if(null!==u)switch(t){case"src":var i="string"==typeof n?n:n[0].src,l=r.getTwitchId(i);"channel"===r.getTwitchType(s)?u.setChannel(l):u.setVideo(l);break;case"currentTime":u.seek(n),setTimeout(function(){var t=mejs.Utils.createEvent("timeupdate",a);e.dispatchEvent(t)},50);break;case"muted":u.setMuted(n),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",a);e.dispatchEvent(t)},50);break;case"volume":h=n,u.setVolume(n),setTimeout(function(){var t=mejs.Utils.createEvent("volumechange",a);e.dispatchEvent(t)},50);break;case"readyState":var d=mejs.Utils.createEvent("canplay",a);e.dispatchEvent(d)}else o.push({type:"set",propName:t,value:n})}}(v[m]);for(var y=mejs.html5media.methods,w=0,T=y.length;w<T;w++)!function(e){a[e]=function(){if(null!==u)switch(e){case"play":return l=!1,u.play();case"pause":return l=!0,u.pause();case"load":return null}else o.push({type:"call",methodName:e})}}(y[w]);window["__ready__"+a.id]=function(t){if(e.twitchPlayer=u=t,o.length)for(var n=0,r=o.length;n<r;n++){var s=o[n];if("set"===s.type){var h=s.propName,f=""+h.substring(0,1).toUpperCase()+h.substring(1);a["set"+f](s.value)}else"call"===s.type&&a[s.methodName]()}var p=document.getElementById(a.id).firstChild;p.style.width="100%",p.style.height="100%";for(var v=["mouseover","mouseout"],m=0,g=v.length;m<g;m++)p.addEventListener(v[m],function(t){var n=createEvent(t.type,a);e.dispatchEvent(n)},!1);var y=void 0;u.addEventListener(Twitch.Player.READY,function(){l=!1,d=!1,i(["rendererready","loadedmetadata","loadeddata","canplay"])}),u.addEventListener(Twitch.Player.PLAY,function(){c||(c=!0),l=!1,d=!1,i(["play","playing","progress"]),y=setInterval(function(){u.getCurrentTime(),i(["timeupdate"])},250)}),u.addEventListener(Twitch.Player.PAUSE,function(){l=!0,d=!1,u.getEnded()||i(["pause"])}),u.addEventListener(Twitch.Player.ENDED,function(){l=!0,d=!0,i(["ended"]),clearInterval(y),c=!1,y=null})};var E=e.originalNode.height,N=e.originalNode.width,P=document.createElement("div"),_=r.getTwitchType(s),b={id:a.id,width:N,height:E,playsinline:!1,autoplay:e.originalNode.autoplay,muted:e.originalNode.muted};return b[_]=s,P.id=a.id,P.style.width="100%",P.style.height="100%",e.originalNode.parentNode.insertBefore(P,e.originalNode),e.originalNode.style.display="none",e.originalNode.autoplay=!1,a.setSize=function(e,t){null===r||isNaN(e)||isNaN(t)||(P.setAttribute("width",e),P.setAttribute("height",t))},a.hide=function(){a.pause(),P.style.display="none"},a.show=function(){P.style.display=""},a.destroy=function(){},r.load(b),a}};mejs.Utils.typeChecks.push(function(e){return/\/\/(www|player).twitch.tv/i.test(e)?"video/x-twitch":null}),mejs.Renderers.add(i)},{}]},{},[1]);

2

docs/api.md

@@ -62,3 +62,3 @@ # API and Configuration

dash | object | | Accepts `debug`, `drm` (object to load protected/licensed streaming; read [here](https://github.com/Axinom/drm-quick-start) for more information) and `path` parameters to indicate `dash.js` URL/local path
facebook | object | | See [Documentation](https://developers.facebook.com/docs/plugins/embedded-video-player/api#setup)
facebook | object | | See [Documentation](https://developers.facebook.com/docs/plugins/embedded-video-player/api#setup) (and a custom `lang` parameter to indicate the FB SDK language)
flv | object | | See [Documentation](https://github.com/Bilibili/flv.js/blob/master/docs/api.md) (and a custom `path` parameter to indicate where to load library)

@@ -65,0 +65,0 @@ hls | object | | See [Documentation](https://github.com/dailymotion/hls.js/blob/master/API.md#fine-tuning) (and a custom `path` parameter to indicate where to load library)

4

docs/installation.md

@@ -74,5 +74,7 @@ # Installation

5. If you are using Meteor: `meteor add johndyer:mediaelement` or `meteor npm install mediaelement`
5. Through BOWER: `bower install mediaelement`
6. If you are using Meteor: `meteor add johndyer:mediaelement` or `meteor npm install mediaelement`
<a id="wordpress"></a>

@@ -79,0 +81,0 @@ ### Installation in WordPress

1

docs/resources.md

@@ -27,5 +27,4 @@ # Resources

* [Mute tab audio on tab unfocus in javascript/html](https://stackoverflow.com/questions/34506133/mute-tab-audio-on-tab-unfocus-in-javascript-html)
* [MediaElement.js: Skip to next source if previous cannot be played](https://gist.github.com/rafa8626/2ce220b30b7e2ef2dc2e277df6a697ce)
* [MediaElementPlayer.js: use `AudioContext.decodeAudioData()`](https://gist.github.com/rafa8626/e6afe41dd00742a75c4d25cc387a7d61)
* [Use of DRM with MediaElement](https://jsfiddle.net/f431r2zq/12/)
* [MediaElementPlayer.js using Chromecast and dynamic sources](https://jsfiddle.net/Luuwnjfm/18/)

6

docs/usage.md

@@ -86,6 +86,2 @@ # Usage

// To import only MediaElementPlayer class and $.fn.mediaelementplayer plugin
// (includes the HTML5 and Flahs renderers ONLY)
import 'mediaelement/player';
// To import all the plugin (you will have access to the MediaElement and MediaElementPlayer classes,

@@ -118,3 +114,3 @@ // $.fn.mediaelementplayer plugin, all the native renderers, YouTube and Flash shims)

import '/path/to/jquery-global';
import 'mediaelement/full'; // or import `mediaelement/player`;
import 'mediaelement'; // or import `mediaelement/standalone` if you only want the shim but not the full player;
```

@@ -121,0 +117,0 @@

2

package.js
Package.describe({
name: 'johndyer:mediaelement',
summary: '*Official* MediaElement.js: <video> and <audio> made easy. One file. Any browser. Same UI.',
version: '4.2.5',
version: '4.2.6',
git: 'https://github.com/mediaelement/mediaelement'

@@ -6,0 +6,0 @@ });

2

package.json
{
"name": "mediaelement",
"license": "MIT",
"version": "4.2.5",
"version": "4.2.6",
"main": "full.js",

@@ -6,0 +6,0 @@ "repository": {

22

src/js/core/mediaelement.js

@@ -394,5 +394,20 @@ 'use strict';

if (methodName === 'play' && t.mediaElement.rendererName === 'native_dash') {
setTimeout(() => {
t.mediaElement.renderer[methodName](args);
}, 100);
const response = t.mediaElement.renderer[methodName](args);
if (response && typeof response.then === 'function') {
response.catch(() => {
if (t.mediaElement.paused) {
setTimeout(() => {
const tmpResponse = t.mediaElement.renderer.play();
if (tmpResponse !== undefined) {
// Final attempt: pause the media if not paused
tmpResponse.catch(() => {
if (!t.mediaElement.renderer.paused) {
t.mediaElement.renderer.pause();
}
});
}
}, 150);
}
});
}
} else {

@@ -518,3 +533,4 @@ t.mediaElement.renderer[methodName](args);

window.MediaElement = MediaElement;
mejs.MediaElement = MediaElement;
export default MediaElement;

2

src/js/core/mejs.js

@@ -9,3 +9,3 @@ 'use strict';

// version number
mejs.version = '4.2.5';
mejs.version = '4.2.6';

@@ -12,0 +12,0 @@ // Basic HTML5 settings

15

src/js/features/fullscreen.js

@@ -106,2 +106,17 @@ 'use strict';

t.options.keyActions.push({
keys: [70], // F
action: (player, media, key, event) => {
if (!event.ctrlKey) {
if (typeof player.enterFullScreen !== 'undefined') {
if (player.isFullScreen) {
player.exitFullScreen();
} else {
player.enterFullScreen();
}
}
}
}
});
t.exitFullscreenCallback = (e) => {

@@ -108,0 +123,0 @@ const key = e.which || e.keyCode || 0;

148

src/js/features/progress.js

@@ -7,3 +7,3 @@ 'use strict';

import i18n from '../core/i18n';
import {IS_FIREFOX, IS_IOS, IS_ANDROID} from '../utils/constants';
import {IS_FIREFOX, IS_IOS, IS_ANDROID, SUPPORT_PASSIVE_EVENT} from '../utils/constants';
import {secondsToTimeCode} from '../utils/time';

@@ -78,4 +78,44 @@ import {offset, addClass, removeClass, hasClass} from '../utils/dom';

controls.querySelector(`.${t.options.classPrefix}time-buffering`).style.display = 'none';
t.options.keyActions.push({
keys: [
37, // LEFT
227 // Google TV rewind
],
action: (player) => {
if (!isNaN(player.duration) && player.duration > 0) {
if (player.isVideo) {
player.showControls();
player.startControlsTimer();
}
player.container.querySelector(`.${config.classPrefix}time-total`).focus();
// 5%
const newTime = Math.max(player.currentTime - player.options.defaultSeekBackwardInterval(player), 0);
player.setCurrentTime(newTime);
}
}
},
{
keys: [
39, // RIGHT
228 // Google TV forward
],
action: (player) => {
if (!isNaN(player.duration) && player.duration > 0) {
if (player.isVideo) {
player.showControls();
player.startControlsTimer();
}
player.container.querySelector(`.${config.classPrefix}time-total`).focus();
// 5%
const newTime = Math.min(player.currentTime + player.options.defaultSeekForwardInterval(player), player.duration);
player.setCurrentTime(newTime);
}
}
});
t.rail = controls.querySelector(`.${t.options.classPrefix}time-rail`);

@@ -90,2 +130,3 @@ t.total = controls.querySelector(`.${t.options.classPrefix}time-total`);

t.hovered = controls.querySelector(`.${t.options.classPrefix}time-hovered`);
t.buffer = controls.querySelector(`.${t.options.classPrefix}time-buffering`);
t.newTime = 0;

@@ -101,2 +142,4 @@ t.forcedHandlePause = false;

t.buffer.style.display = 'none';
/**

@@ -171,3 +214,3 @@ *

// position floating time box
if (!IS_IOS && !IS_ANDROID && t.timefloat) {
if (!IS_IOS && !IS_ANDROID) {
if (pos < 0){

@@ -195,14 +238,25 @@ pos = 0;

// Add correct position of tooltip if rail is 100%
const 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) {
const
half = t.timefloat.offsetWidth / 2,
offsetContainer = mejs.Utils.offset(t.container),
tooltipStyles = getComputedStyle(t.timefloat)
;
if ((x - offsetContainer.left) < t.timefloat.offsetWidth) {
leftPos = half;
} else if ((x - offsetContainer.left) >= t.container.offsetWidth - half) {
leftPos = t.total.offsetWidth - half;
} else {
leftPos = pos;
}
if (hasClass(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 = secondsToTimeCode(t.newTime, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength);
t.timefloat.style.display = 'block';
}
t.timefloat.style.left = `${leftPos}px`;
t.timefloatcurrent.innerHTML = secondsToTimeCode(t.newTime, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength);
t.timefloat.style.display = 'block';
}

@@ -292,6 +346,28 @@ } else if (!IS_IOS && !IS_ANDROID && t.timefloat) {

let seekTime = t.getCurrentTime();
const volume = 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();
}
const
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: // left
case 40: // Down
if (t.getDuration() !== Infinity) {

@@ -302,3 +378,2 @@ seekTime -= seekBackward;

case 39: // Right
case 38: // Up
if (t.getDuration() !== Infinity) {

@@ -314,4 +389,5 @@ seekTime += seekForward;

break;
case 13: // enter
case 32: // space
if (!IS_FIREFOX) {
if (IS_FIREFOX) {
if (t.paused) {

@@ -324,9 +400,2 @@ t.play();

return;
case 13: // enter
if (t.paused) {
t.play();
} else {
t.pause();
}
return;
default:

@@ -342,2 +411,3 @@ return;

if (seekTime < t.getDuration() && !startedPaused) {

@@ -348,2 +418,3 @@ setTimeout(restartPlayer, 1100);

t.setCurrentTime(seekTime);
player.showControls();

@@ -392,3 +463,3 @@ e.preventDefault();

}
});
}, (SUPPORT_PASSIVE_EVENT && events[i] === 'touchstart') ? { passive: true } : false);
}

@@ -450,2 +521,29 @@ t.slider.addEventListener('mouseenter', (e) => {

media.addEventListener('timeupdate', t.broadcastCallback);
media.addEventListener('play', () => {
t.buffer.style.display = 'none';
});
media.addEventListener('playing', () => {
t.buffer.style.display = 'none';
});
media.addEventListener('seeking', () => {
t.buffer.style.display = '';
});
media.addEventListener('seeked', () => {
t.buffer.style.display = 'none';
});
media.addEventListener('pause', () => {
t.buffer.style.display = 'none';
});
media.addEventListener('waiting', () => {
t.buffer.style.display = '';
});
media.addEventListener('loadeddata', () => {
t.buffer.style.display = '';
});
media.addEventListener('canplay', () => {
t.buffer.style.display = 'none';
});
media.addEventListener('error', () => {
t.buffer.style.display = 'none';
});

@@ -452,0 +550,0 @@ t.container.addEventListener('controlsresize', (e) => {

12

src/js/features/time.js

@@ -50,2 +50,3 @@ 'use strict';

t.addControlElement(time, 'current');
player.updateCurrent();
t.updateTimeCallback = () => {

@@ -96,6 +97,12 @@ if (t.controlsAreVisible) {

media.addEventListener('timeupdate', t.updateTimeCallback);
t.updateDurationCallback = () => {
if (t.controlsAreVisible) {
player.updateDuration();
}
};
media.addEventListener('timeupdate', t.updateDurationCallback);
},
cleanduration (player, controls, layers, media) {
media.removeEventListener('timeupdate', player.updateTimeCallback);
media.removeEventListener('timeupdate', player.updateDurationCallback);
},

@@ -127,2 +134,3 @@

t.controls.querySelector(`.${t.options.classPrefix}currenttime`).innerText = timecode;
}

@@ -129,0 +137,0 @@ },

36

src/js/features/tracks.js

@@ -75,2 +75,4 @@ 'use strict';

this.findTracks();
if (!player.tracks.length && (!player.trackFiles || !player.trackFiles.length === 0)) {

@@ -174,3 +176,3 @@ return;

if (t.options.toggleCaptionsButtonWhenOnlyOne && subtitleCount === 1) {
player.captionsButton.addEventListener('click', () => {
player.captionsButton.addEventListener('click', (e) => {
let trackId = 'none';

@@ -180,3 +182,4 @@ if (player.selectedTrack === null) {

}
player.setTrack(trackId);
const keyboard = e.keyCode || e.which;
player.setTrack(trackId, (typeof keyboard !== 'undefined'));
});

@@ -202,7 +205,8 @@ } else {

for (let i = 0, total = captions.length; i < total; i++) {
captions[i].addEventListener('click', function () {
captions[i].addEventListener('click', function (e) {
// value is trackId, same as the actual id, and we're using it here
// because the "none" checkbox doesn't have a trackId
// to use, but we want to know when "none" is clicked
player.setTrack(this.value);
const keyboard = e.keyCode || e.which;
player.setTrack(this.value, (typeof keyboard !== 'undefined'));
});

@@ -212,3 +216,3 @@ }

for (let i = 0, total = labels.length; i < total; i++) {
labels[i].addEventListener('click', function () {
labels[i].addEventListener('click', function (e) {
const

@@ -219,2 +223,3 @@ radio = siblings(this, (el) => el.tagName === 'INPUT')[0],

radio.dispatchEvent(event);
e.preventDefault();
});

@@ -340,4 +345,5 @@ }

* @param {String} trackId, or "none" to disable captions
* @param {Boolean} setByKeyboard
*/
setTrack (trackId) {
setTrack (trackId, setByKeyboard) {

@@ -386,2 +392,8 @@ const

t.media.dispatchEvent(event);
if (!setByKeyboard) {
setTimeout(function() {
t.container.focus();
}, 500);
}
},

@@ -702,3 +714,3 @@

radios[i].checked = false;
radios[i].addEventListener('click', function () {
radios[i].addEventListener('click', function (e) {
const

@@ -719,2 +731,9 @@ self = this,

const keyboard = e.keyCode || e.which;
if (typeof keyboard === 'undefined') {
setTimeout(function() {
t.container.focus();
}, 500);
}
t.media.setCurrentTime(parseFloat(self.value));

@@ -728,3 +747,3 @@ if (t.media.paused) {

for (let i = 0, total = labels.length; i < total; i++) {
labels[i].addEventListener('click', function () {
labels[i].addEventListener('click', function (e) {
const

@@ -735,2 +754,3 @@ radio = siblings(this, (el) => el.tagName === 'INPUT')[0],

radio.dispatchEvent(event);
e.preventDefault();
});

@@ -737,0 +757,0 @@ }

65

src/js/features/volume.js

@@ -93,2 +93,60 @@ 'use strict';

t.options.keyActions.push({
keys: [38], // UP
action: (player) => {
const volumeSlider = player.container.querySelector(`.${config.classPrefix}volume-slider`);
if (volumeSlider || player.container.querySelector(`.${config.classPrefix}volume-slider`).matches(':focus')) {
volumeSlider.style.display = 'block';
}
if (player.isVideo) {
player.showControls();
player.startControlsTimer();
}
const newVolume = Math.min(player.volume + 0.1, 1);
player.setVolume(newVolume);
if (newVolume > 0) {
player.setMuted(false);
}
}
},
{
keys: [40], // DOWN
action: (player) => {
const volumeSlider = player.container.querySelector(`.${config.classPrefix}volume-slider`);
if (volumeSlider) {
volumeSlider.style.display = 'block';
}
if (player.isVideo) {
player.showControls();
player.startControlsTimer();
}
const newVolume = Math.max(player.volume - 0.1, 0);
player.setVolume(newVolume);
if (newVolume <= 0.1) {
player.setMuted(true);
}
}
},
{
keys: [77], // M
action: (player) => {
player.container.querySelector(`.${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);
}
}
});
// horizontal version

@@ -246,2 +304,9 @@ if (mode === 'horizontal') {

player.container.addEventListener('keydown', (e) => {
const hasFocus = !!(e.target.closest(`.${t.options.classPrefix}container`));
if (!hasFocus && mode === 'vertical') {
volumeSlider.style.display = 'none';
}
});
mute.addEventListener('mouseenter', (e) => {

@@ -248,0 +313,0 @@ if (e.target === mute) {

188

src/js/player.js

@@ -17,3 +17,4 @@ 'use strict';

IS_STOCK_ANDROID,
HAS_TRUE_NATIVE_FULLSCREEN
HAS_TRUE_NATIVE_FULLSCREEN,
SUPPORT_PASSIVE_EVENT
} from './utils/constants';

@@ -143,113 +144,2 @@ import {splitEvents, isNodeAfter, createEvent, isString} from './utils/general';

}
},
{
keys: [38], // UP
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();
}
const newVolume = Math.min(player.volume + 0.1, 1);
player.setVolume(newVolume);
if (newVolume > 0) {
player.setMuted(false);
}
}
},
{
keys: [40], // DOWN
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();
}
const newVolume = Math.max(player.volume - 0.1, 0);
player.setVolume(newVolume);
if (newVolume <= 0.1) {
player.setMuted(true);
}
}
},
{
keys: [
37, // LEFT
227 // Google TV rewind
],
action: (player) => {
if (!isNaN(player.duration) && player.duration > 0) {
if (player.isVideo) {
player.showControls();
player.startControlsTimer();
}
// 5%
const newTime = Math.max(player.currentTime - player.options.defaultSeekBackwardInterval(player), 0);
player.setCurrentTime(newTime);
}
}
},
{
keys: [
39, // RIGHT
228 // Google TV forward
],
action: (player) => {
if (!isNaN(player.duration) && player.duration > 0) {
if (player.isVideo) {
player.showControls();
player.startControlsTimer();
}
// 5%
const newTime = Math.min(player.currentTime + player.options.defaultSeekForwardInterval(player), player.duration);
player.setCurrentTime(newTime);
}
}
},
{
keys: [70], // F
action: (player, media, key, event) => {
if (!event.ctrlKey) {
if (typeof player.enterFullScreen !== 'undefined') {
if (player.isFullScreen) {
player.exitFullScreen();
} else {
player.enterFullScreen();
}
}
}
}
},
{
keys: [77], // M
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);
}
}
}

@@ -771,5 +661,2 @@ ]

// grab for use by features
t.findTracks();
// cache container to store control elements' original position

@@ -781,2 +668,6 @@ t.featurePosition = {};

t.buildposter(t, t.controls, t.layers, t.media);
t.buildkeyboard(t, t.controls, t.layers, t.media);
t.buildoverlays(t, t.controls, t.layers, t.media);
if (t.options.useDefaultControls) {

@@ -800,6 +691,2 @@ const defaultControls = ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'];

t.buildposter(t, t.controls, t.layers, t.media);
t.buildkeyboard(t, t.controls, t.layers, t.media);
t.buildoverlays(t, t.controls, t.layers, t.media);
const event = createEvent('controlsready', t.container);

@@ -858,3 +745,3 @@ t.container.dispatchEvent(event);

}
});
}, SUPPORT_PASSIVE_EVENT ? { passive: true } : false);
} else {

@@ -894,9 +781,9 @@ // show/hide controls

// resizer
if (t.options.enableAutosize) {
t.media.addEventListener('loadedmetadata', (e) => {
// if the <video height> was not set and the options.videoHeight was not set
// then resize to the real dimensions
// if the `height` attribute and `height` style and `options.videoHeight`
// were not set, resize to the media's real dimensions
const target = (e !== undefined) ? (e.detail.target || e.target) : t.media;
if (t.options.videoHeight <= 0 && !t.domNode.getAttribute('height') &&
!t.domNode.style.height &&
target !== null && !isNaN(target.videoHeight)) {

@@ -1111,3 +998,3 @@ t.setPlayerSize(target.videoWidth, target.videoHeight);

if (errorContent) {
if (!errorContent) {
const poster = t.media.originalNode.getAttribute('poster');

@@ -1119,3 +1006,3 @@ if (poster) {

if (e.message) {
errorContent += `<p>${e.message}</p>`;
errorContent = `<p>${e.message}</p>`;
}

@@ -1136,2 +1023,6 @@

}
if (t.controlsEnabled) {
t.disableControls();
}
}

@@ -1650,4 +1541,6 @@

// priority goes to option (this is useful if you need to support iOS 3.x (iOS completely fails with poster)
if (player.options.poster !== '' && posterUrl && IS_IOS) {
media.originalNode.removeAttribute('poster');
if (player.options.poster !== '') {
if (posterUrl && IS_IOS) {
media.originalNode.removeAttribute('poster');
}
posterUrl = player.options.poster;

@@ -1705,4 +1598,3 @@ }

// this needs to come last so it's on top
bigPlay = document.createElement('div'),
buffer = controls.querySelector(`.${t.options.classPrefix}time-buffering`)
bigPlay = document.createElement('div')
;

@@ -1771,5 +1663,2 @@

loading.style.display = 'none';
if (buffer !== null) {
buffer.style.display = 'none';
}
error.style.display = 'none';

@@ -1781,5 +1670,2 @@ hasError = false;

loading.style.display = 'none';
if (buffer !== null) {
buffer.style.display = 'none';
}
error.style.display = 'none';

@@ -1791,5 +1677,2 @@ hasError = false;

loading.style.display = '';
if (buffer !== null) {
buffer.style.display = '';
}
hasError = false;

@@ -1800,5 +1683,2 @@ });

loading.style.display = 'none';
if (buffer !== null) {
buffer.style.display = 'none';
}
hasError = false;

@@ -1811,5 +1691,2 @@ });

}
if (buffer !== null) {
buffer.style.display = 'none';
}
hasError = false;

@@ -1819,5 +1696,2 @@ });

loading.style.display = '';
if (buffer !== null) {
buffer.style.display = '';
}
hasError = false;

@@ -1829,6 +1703,2 @@ });

loading.style.display = '';
if (buffer !== null) {
buffer.style.display = '';
}
// Firing the 'canplay' event after a timeout which isn't getting fired on some Android 4.1 devices

@@ -1849,5 +1719,2 @@ // (https://github.com/johndyer/mediaelement/issues/1305)

loading.style.display = 'none';
if (buffer !== null) {
buffer.style.display = 'none';
}
// Clear timeout inside 'loadeddata' to prevent 'canplay' from firing twice

@@ -1863,8 +1730,11 @@ clearTimeout(media.canplayTimeout);

bigPlay.style.display = 'none';
if (buffer !== null) {
buffer.style.display = 'none';
}
hasError = true;
});
media.addEventListener('loadedmetadata', () => {
if (!t.controlsEnabled) {
t.enableControls();
}
});
media.addEventListener('keydown', (e) => {

@@ -1916,2 +1786,3 @@ t.onkeydown(player, media, e);

e.stopPropagation();
return;
}

@@ -2068,2 +1939,4 @@ }

t.node.style.height = nativeHeight;
// Call this to avoid further calls to attempt set the player's dimensions
t.setPlayerSize(0,0);

@@ -2155,3 +2028,4 @@ // grab video and put it back in place

window.MediaElementPlayer = MediaElementPlayer;
mejs.MediaElementPlayer = MediaElementPlayer;
export default MediaElementPlayer;

2

src/js/renderers/dailymotion.js

@@ -89,3 +89,3 @@ 'use strict';

player.addEventListener('apiready', () => {
window['__ready__' + settings.id](player, {paused: true, ended: false});
window[`__ready__${settings.id}`](player, {paused: true, ended: false});
});

@@ -92,0 +92,0 @@ },

2

src/js/renderers/dash.js

@@ -56,3 +56,3 @@ 'use strict';

const player = dashjs.MediaPlayer().create();
window['__ready__' + settings.id](player);
window[`__ready__${settings.id}`](player);
return player;

@@ -59,0 +59,0 @@ }

395

src/js/renderers/facebook.js

@@ -9,2 +9,36 @@ 'use strict';

*/
const FacebookApi = {
promise: null,
/**
* Create a queue to prepare the creation of <iframe>
*
* @param {Object} settings - an object with settings needed to create <iframe>
*/
load: (settings) => {
if (typeof FB !== 'undefined') {
FacebookApi._createPlayer(settings);
} else {
FacebookApi.promise = FacebookApi.promise || mejs.Utils.loadScript(`https://connect.facebook.net/${settings.options.lang}/sdk.js`);
FacebookApi.promise.then(() => {
FB.init(settings.options);
setTimeout(() => {
FacebookApi._createPlayer(settings);
}, 50);
});
}
},
/**
* Create a new instance of Facebook API player and trigger a custom event to initialize it
*
* @param {Object} settings - the instance ID
*/
_createPlayer: (settings) => {
window[`__ready__${settings.id}`]();
}
};
const FacebookRenderer = {

@@ -17,3 +51,4 @@ name: 'facebook',

xfbml: true,
version: 'v2.10'
version: 'v2.10',
lang: 'en_US'
}

@@ -28,3 +63,3 @@ },

*/
canPlayType: (type) => ~['video/facebook', 'video/x-facebook'].indexOf(type.toLowerCase()),
canPlayType: (type) => ~['video/facebook', 'video/x-facebook'].indexOf(type.toLowerCase()),

@@ -39,22 +74,23 @@ /**

*/
create: (mediaElement, options, mediaFiles) => {
create: (mediaElement, options, mediaFiles) => {
const
fbWrapper = {},
apiStack = [],
eventHandler = {},
readyState = 4,
autoplay = mediaElement.originalNode.autoplay
fb = {},
readyState = 4
;
let
poster = '',
src = '',
hasStartedPlaying = false,
paused = true,
ended = false,
hasStartedPlaying = false,
fbApi = null,
fbDiv = null
fbPlayer = null,
src = '',
poster = '',
autoplay = mediaElement.originalNode.autoplay
;
fb.options = options;
fb.id = mediaElement.id + '_' + options.prefix;
fb.mediaElement = mediaElement;
if (mejs.Features.isiPhone && mediaElement.originalNode.getAttribute('poster')) {

@@ -65,17 +101,12 @@ poster = mediaElement.originalNode.getAttribute('poster');

options = Object.assign(options, mediaElement.options);
fbWrapper.options = options;
fbWrapper.id = mediaElement.id + '_' + options.prefix;
fbWrapper.mediaElement = mediaElement;
// wrappers for get/set
const
props = mejs.html5media.properties,
assignGettersSetters = (propName) => {
assignGettersSetters = (propName) => {
const capName = `${propName.substring(0, 1).toUpperCase()}${propName.substring(1)}`;
fbWrapper[`get${capName}`] = () => {
fb[`get${capName}`] = () => {
if (fbApi !== null) {
if (fbPlayer !== null) {
const value = null;

@@ -86,7 +117,7 @@

case 'currentTime':
return fbApi.getCurrentPosition();
return fbPlayer.getCurrentPosition();
case 'duration':
return fbApi.getDuration();
return fbPlayer.getDuration();
case 'volume':
return fbApi.getVolume();
return fbPlayer.getVolume();
case 'paused':

@@ -97,3 +128,3 @@ return paused;

case 'muted':
return fbApi.isMuted();
return fbPlayer.isMuted();
case 'buffered':

@@ -121,5 +152,5 @@ return {

fbWrapper[`set${capName}`] = (value) => {
fb[`set${capName}`] = (value) => {
if (fbApi !== null) {
if (fbPlayer !== null) {

@@ -129,8 +160,22 @@ switch (propName) {

const url = typeof value === 'string' ? value : value[0].src;
src = url;
// Only way is to destroy instance and all the events fired,
// and create new one
fbDiv.remove();
createFacebookEmbed(url, options.facebook);
fbContainer.remove();
fbContainer = document.createElement('div');
fbContainer.id = fb.id;
fbContainer.className = 'fb-video';
fbContainer.setAttribute('data-href', url);
fbContainer.setAttribute('data-allowfullscreen', 'true');
fbContainer.setAttribute('data-controls', 'false');
mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
FacebookApi.load({
lang: fb.options.lang,
id: fb.id
});
// This method reloads video on-demand

@@ -140,17 +185,16 @@ FB.XFBML.parse();

if (autoplay) {
fbApi.play();
fbPlayer.play();
}
break;
case 'currentTime':
fbApi.seek(value);
fbPlayer.seek(value);
break;
case 'muted':
if (value) {
fbApi.mute();
fbPlayer.mute();
} else {
fbApi.unmute();
fbPlayer.unmute();
}
setTimeout(() => {
const event = mejs.Utils.createEvent('volumechange', fbWrapper);
const event = mejs.Utils.createEvent('volumechange', fb);
mediaElement.dispatchEvent(event);

@@ -160,5 +204,5 @@ }, 50);

case 'volume':
fbApi.setVolume(value);
fbPlayer.setVolume(value);
setTimeout(() => {
const event = mejs.Utils.createEvent('volumechange', fbWrapper);
const event = mejs.Utils.createEvent('volumechange', fb);
mediaElement.dispatchEvent(event);

@@ -168,7 +212,7 @@ }, 50);

case 'readyState':
const event = mejs.Utils.createEvent('canplay', fbWrapper);
const event = mejs.Utils.createEvent('canplay', fb);
mediaElement.dispatchEvent(event);
break;
default:
console.log('facebook ' + fbWrapper.id, propName, 'UNSUPPORTED property');
console.log('facebook ' + fb.id, propName, 'UNSUPPORTED property');
break;

@@ -191,10 +235,10 @@ }

methods = mejs.html5media.methods,
assignMethods = (methodName) => {
fbWrapper[methodName] = () => {
if (fbApi !== null) {
assignMethods = (methodName) => {
fb[methodName] = () => {
if (fbPlayer !== null) {
switch (methodName) {
case 'play':
return fbApi.play();
return fbPlayer.play();
case 'pause':
return fbApi.pause();
return fbPlayer.pause();
case 'load':

@@ -214,3 +258,2 @@ return null;

/**

@@ -222,5 +265,5 @@ * Dispatch a list of events

*/
function sendEvents (events) {
function assignEvents (events) {
for (let i = 0, total = events.length; i < total; i++) {
const event = mejs.Utils.createEvent(events[i], fbWrapper);
const event = mejs.Utils.createEvent(events[i], fb);
mediaElement.dispatchEvent(event);

@@ -230,165 +273,142 @@ }

/**
* Create a new Facebook player and attach all its events
*
* This method creates a <div> element that, once the API is available, will generate an <iframe>.
* Valid URL format(s):
* - https://www.facebook.com/johndyer/videos/10107816243681884/
*
* @param {String} url
* @param {Object} config
*/
function createFacebookEmbed (url, config) {
window['__ready__' + fb.id] = () => {
FB.Event.subscribe('xfbml.ready', (msg) => {
if (msg.type === 'video' && fb.id === msg.id) {
mediaElement.fbPlayer = fbPlayer = msg.instance;
// Append width and height if not detected
src = url;
// Set proper size since player dimensions are unknown before this event
const
fbIframe = document.getElementById(fb.id),
width = fbIframe.offsetWidth,
height = fbIframe.offsetHeight,
events = ['mouseover', 'mouseout'],
assignIframeEvents = (e) => {
const event = mejs.Utils.createEvent(e.type, fb);
mediaElement.dispatchEvent(event);
}
;
fbDiv = document.createElement('div');
fbDiv.id = fbWrapper.id;
fbDiv.className = "fb-video";
fbDiv.setAttribute("data-href", url);
fbDiv.setAttribute("data-allowfullscreen", "true");
fbDiv.setAttribute("data-controls", "false");
fb.setSize(width, height);
fbPlayer.unmute();
mediaElement.originalNode.parentNode.insertBefore(fbDiv, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
if (autoplay) {
fbPlayer.play();
}
/*
* Register Facebook API event globally
*
*/
window.fbAsyncInit = () => {
for (let i = 0, total = events.length; i < total; i++) {
fbIframe.addEventListener(events[i], assignIframeEvents);
}
FB.init(config);
fb.eventHandler = {};
FB.Event.subscribe('xfbml.ready', (msg) => {
if (msg.type === 'video') {
fbApi = msg.instance;
// Set proper size since player dimensions are unknown before this event
// remove previous listeners
const fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
for (let i = 0, total = fbEvents.length; i < total; i++) {
const
fbIframe = fbDiv.getElementsByTagName('iframe')[0],
width = fbIframe.offsetWidth,
height = fbIframe.offsetHeight,
events = ['mouseover', 'mouseout'],
assignEvents = (e) => {
const event = mejs.Utils.createEvent(e.type, fbWrapper);
mediaElement.dispatchEvent(event);
}
event = fbEvents[i],
handler = fb.eventHandler[event]
;
if (handler !== undefined && handler !== null &&
!mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
handler.removeListener(event);
}
}
fbWrapper.setSize(width, height);
// do call stack
if (apiStack.length) {
for (let i = 0, total = apiStack.length; i < total; i++) {
const stackItem = apiStack[i];
if (autoplay) {
fbApi.play();
}
if (stackItem.type === 'set') {
const
propName = stackItem.propName,
capName = `${propName.substring(0, 1).toUpperCase()}${propName.substring(1)}`
;
for (let i = 0, total = events.length; i < total; i++) {
fbIframe.addEventListener(events[i], assignEvents, false);
}
fb[`set${capName}`](stackItem.value);
// remove previous listeners
const fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
for (let i = 0, total = fbEvents.length; i < total; i++) {
const
event = fbEvents[i],
handler = eventHandler[event]
;
if (handler !== undefined && handler !== null &&
!mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
handler.removeListener(event);
} else if (stackItem.type === 'call') {
fb[stackItem.methodName]();
}
}
}
// do call stack
if (apiStack.length) {
for (let i = 0, total = apiStack.length; i < total; i++) {
assignEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);
const stackItem = apiStack[i];
let timer;
if (stackItem.type === 'set') {
const
propName = stackItem.propName,
capName = `${propName.substring(0, 1).toUpperCase()}${propName.substring(1)}`
;
fbWrapper[`set${capName}`](stackItem.value);
} else if (stackItem.type === 'call') {
fbWrapper[stackItem.methodName]();
}
}
// Custom Facebook events
fb.eventHandler.startedPlaying = fbPlayer.subscribe('startedPlaying', () => {
if (!hasStartedPlaying) {
hasStartedPlaying = true;
}
paused = false;
ended = false;
assignEvents(['play', 'playing', 'timeupdate']);
sendEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);
// Workaround to update progress bar
timer = setInterval(() => {
fbPlayer.getCurrentPosition();
assignEvents(['timeupdate']);
}, 250);
});
fb.eventHandler.paused = fbPlayer.subscribe('paused', () => {
paused = true;
ended = false;
assignEvents(['pause']);
});
fb.eventHandler.finishedPlaying = fbPlayer.subscribe('finishedPlaying', () => {
paused = true;
ended = true;
let timer;
assignEvents(['ended']);
clearInterval(timer);
timer = null;
});
fb.eventHandler.startedBuffering = fbPlayer.subscribe('startedBuffering', () => {
assignEvents(['progress', 'timeupdate']);
});
fb.eventHandler.finishedBuffering = fbPlayer.subscribe('finishedBuffering', () => {
assignEvents(['progress', 'timeupdate']);
});
// Custom Facebook events
eventHandler.startedPlaying = fbApi.subscribe('startedPlaying', () => {
if (!hasStartedPlaying) {
hasStartedPlaying = true;
}
paused = false;
ended = false;
sendEvents(['play', 'playing', 'timeupdate']);
// Workaround to update progress bar
timer = setInterval(() => {
fbApi.getCurrentPosition();
sendEvents(['timeupdate']);
}, 250);
});
eventHandler.paused = fbApi.subscribe('paused', () => {
paused = true;
ended = false;
sendEvents(['pause']);
});
eventHandler.finishedPlaying = fbApi.subscribe('finishedPlaying', () => {
paused = true;
ended = true;
}
});
};
sendEvents(['ended']);
clearInterval(timer);
timer = null;
});
eventHandler.startedBuffering = fbApi.subscribe('startedBuffering', () => {
sendEvents(['progress', 'timeupdate']);
});
eventHandler.finishedBuffering = fbApi.subscribe('finishedBuffering', () => {
sendEvents(['progress', 'timeupdate']);
});
// Create fb <iframe> markup
src = mediaFiles[0].src;
let fbContainer = document.createElement('div');
fbContainer.id = fb.id;
fbContainer.className = 'fb-video';
fbContainer.setAttribute('data-href', src);
fbContainer.setAttribute('data-allowfullscreen', 'true');
fbContainer.setAttribute('data-controls', 'false');
mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
FacebookApi.load({
options: fb.options.facebook,
id: fb.id
});
}
});
};
mejs.Utils.loadScript('https://connect.facebook.net/en_US/sdk.js');
}
if (mediaFiles.length > 0) {
createFacebookEmbed(mediaFiles[0].src, fbWrapper.options.facebook);
}
fbWrapper.hide = () => {
fbWrapper.stopInterval();
fbWrapper.pause();
if (fbDiv) {
fbDiv.style.display = 'none';
fb.hide = () => {
fb.pause();
if (fbPlayer) {
fbContainer.style.display = 'none';
}
};
fbWrapper.show = () => {
if (fbDiv) {
fbDiv.style.display = '';
fb.setSize = (width) => {
if (fbPlayer !== null && !isNaN(width)) {
fbContainer.style.width = width;
}
};
fbWrapper.setSize = (width) => {
if (fbApi !== null && !isNaN(width)) {
fbDiv.style.width = width;
fb.show = () => {
if (fbPlayer) {
fbContainer.style.display = '';
}
};
fbWrapper.destroy = () => {
fb.destroy = () => {
if (poster) {

@@ -399,18 +419,3 @@ mediaElement.originalNode.setAttribute('poster', poster);

fbWrapper.interval = null;
fbWrapper.startInterval = () => {
// create timer
fbWrapper.interval = setInterval(() => {
const event = mejs.Utils.createEvent('timeupdate', fbWrapper);
mediaElement.dispatchEvent(event);
}, 250);
};
fbWrapper.stopInterval = () => {
if (fbWrapper.interval) {
clearInterval(fbWrapper.interval);
}
};
return fbWrapper;
return fb;
}

@@ -417,0 +422,0 @@ };

83

src/js/renderers/flash.js

@@ -9,3 +9,3 @@ 'use strict';

import {createEvent} from '../utils/general';
import {NAV, IS_IE} from '../utils/constants';
import {NAV, IS_IE, IS_EDGE} from '../utils/constants';
import {typeChecks, absolutizeUrl} from '../utils/media';

@@ -85,3 +85,3 @@

}
// Internet Explorer / ActiveX
// Internet Explorer / ActiveX
} else if (window.ActiveXObject !== undefined) {

@@ -133,2 +133,3 @@ try {

const flash = {};
let isActive = false;

@@ -208,21 +209,23 @@ flash.options = options;

flash[methodName] = () => {
if (flash.flashApi !== null) {
if (isActive) {
if (flash.flashApi !== null) {
// send call up to Flash ExternalInterface API
if (flash.flashApi[`fire_${methodName}`]) {
try {
flash.flashApi[`fire_${methodName}`]();
} catch (e) {
console.log(e);
// send call up to Flash ExternalInterface API
if (flash.flashApi[`fire_${methodName}`]) {
try {
flash.flashApi[`fire_${methodName}`]();
} catch (e) {
console.log(e);
}
} else {
console.log('flash', 'missing method', methodName);
}
} else {
console.log('flash', 'missing method', methodName);
// store for after "READY" event fires
flash.flashApiStack.push({
type: 'call',
methodName: methodName
});
}
} else {
// store for after "READY" event fires
flash.flashApiStack.push({
type: 'call',
methodName: methodName
});
}

@@ -232,3 +235,3 @@ };

}
;
;
methods.push('stop');

@@ -321,13 +324,24 @@ for (let i = 0, total = methods.length; i < total; i++) {

if (IS_IE) {
if (IS_IE || IS_EDGE) {
const specialIEContainer = document.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 (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}"`
];
}

@@ -347,3 +361,3 @@ if (!isVideo) {

`<div>${i18n.t('mejs.install-flash')}</div>` +
`</object>`;
`</object>`;

@@ -365,10 +379,13 @@ } else {

`src="${flash.options.pluginPath}${flash.options.filename}"`,
`flashvars="${flashVars.join('&')}"`,
`width="${flashWidth}"`,
`height="${flashHeight}"`
`flashvars="${flashVars.join('&')}"`
];
if (!isVideo) {
settings.push('style="clip: rect(0 0 0 0); position: absolute;"');
// set width&height attributes for video only
if (isVideo) {
settings.push(`width="${flashWidth}"`);
settings.push(`height="${flashHeight}"`);
}
else {
settings.push('style="position: fixed; left: -9999em; top: -9999em;"');
}

@@ -381,2 +398,3 @@ flash.flashWrapper.innerHTML = `<embed ${settings.join(' ')}>`;

flash.hide = () => {
isActive = false;
if (isVideo) {

@@ -387,2 +405,3 @@ flash.flashNode.style.display = 'none';

flash.show = () => {
isActive = true;
if (isVideo) {

@@ -389,0 +408,0 @@ flash.flashNode.style.display = '';

10

src/js/renderers/flv.js

@@ -38,3 +38,3 @@ 'use strict';

settings.options.path = typeof settings.options.path === 'string' ?
settings.options.path : 'https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.2/flv.min.js';
settings.options.path : 'https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.3/flv.min.js';

@@ -58,3 +58,3 @@ NativeFlv.promise = NativeFlv.promise || loadScript(settings.options.path);

flvjs.LoggingControl.enableVerbose = settings.options.debug;
const player = flvjs.createPlayer(settings.options);
const player = flvjs.createPlayer(settings.options, settings.configs);
window[`__ready__${settings.id}`](player);

@@ -71,3 +71,3 @@ return player;

// Special config: used to set the local path/URL of flv.js library
path: 'https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.2/flv.min.js',
path: 'https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.3/flv.min.js',
// To modify more elements from FLV player,

@@ -135,2 +135,3 @@ // see https://github.com/Bilibili/flv.js/blob/master/docs/api.md#config

flvOptions.path = options.flv.path;
const flvConfigs = options.flv.configs;

@@ -143,2 +144,3 @@ flvPlayer.destroy();

options: flvOptions,
configs: flvConfigs,
id: id

@@ -230,2 +232,3 @@ });

flvOptions.path = options.flv.path;
const flvConfigs = options.flv.configs;

@@ -262,2 +265,3 @@ node.setSize = (width, height) => {

options: flvOptions,
configs: flvConfigs,
id: id

@@ -264,0 +268,0 @@ }));

35

src/js/renderers/hls.js

@@ -38,3 +38,3 @@ 'use strict';

settings.options.path = typeof settings.options.path === 'string' ?
settings.options.path : 'https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.7.11/hls.min.js';
settings.options.path : 'https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.8.2/hls.min.js';

@@ -58,3 +58,3 @@ NativeHls.promise = NativeHls.promise || loadScript(settings.options.path);

const player = new Hls(settings.options);
window['__ready__' + settings.id](player);
window[`__ready__${settings.id}`](player);
return player;

@@ -70,3 +70,3 @@ }

// Special config: used to set the local path/URL of hls.js library
path: 'https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.7.11/hls.min.js',
path: 'https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.8.2/hls.min.js',
// To modify more elements from hls.js,

@@ -107,3 +107,5 @@ // see https://github.com/dailymotion/hls.js/blob/master/API.md#user-content-fine-tuning

hlsPlayer = null,
node = null
node = null,
index = 0,
total = mediaFiles.length
;

@@ -191,3 +193,4 @@

if (name === 'hlsError') {
console.warn(name, data);
console.warn(data);
data = data[1];

@@ -214,5 +217,13 @@ // borrowed from http://dailymotion.github.io/hls.js/demo/

case 'networkError':
const message = 'Network error';
mediaElement.generateError(message, node.src);
console.error(message);
if (data.details === 'manifestLoadError') {
if (index < total) {
node.setSrc(mediaFiles[index++].src);
node.load();
node.play();
}
} else {
const message = 'Network error';
mediaElement.generateError(message, mediaFiles);
console.error(message);
}
break;

@@ -238,6 +249,6 @@ default:

if (mediaFiles && mediaFiles.length > 0) {
for (let i = 0, total = mediaFiles.length; i < total; i++) {
if (renderer.renderers[options.prefix].canPlayType(mediaFiles[i].type)) {
node.setAttribute('src', mediaFiles[i].src);
if (total > 0) {
for (; index < total; index++) {
if (renderer.renderers[options.prefix].canPlayType(mediaFiles[index].type)) {
node.setAttribute('src', mediaFiles[index].src);
break;

@@ -244,0 +255,0 @@ }

38

src/js/renderers/html5.js

@@ -35,3 +35,3 @@ 'use strict';

(~['application/x-mpegurl', 'vnd.apple.mpegurl', 'audio/mpegurl', 'audio/hls',
'video/hls'].indexOf(type.toLowerCase()) && SUPPORTS_NATIVE_HLS)) {
'video/hls'].indexOf(type.toLowerCase()) && SUPPORTS_NATIVE_HLS)) {
return 'yes';

@@ -55,2 +55,3 @@ } else if (mediaElement.canPlayType) {

const id = mediaElement.id + '_' + options.prefix;
let isActive = false;

@@ -91,4 +92,7 @@ let node = null;

node.addEventListener(eventName, (e) => {
const event = createEvent(e.type, mediaElement);
mediaElement.dispatchEvent(event);
// Emmit an event only in case of the renderer is active at the moment
if (isActive) {
const event = createEvent(e.type, e.target);
mediaElement.dispatchEvent(event);
}
});

@@ -111,2 +115,3 @@

node.hide = () => {
isActive = false;
node.style.display = 'none';

@@ -118,2 +123,3 @@

node.show = () => {
isActive = true;
node.style.display = '';

@@ -124,6 +130,10 @@

if (mediaFiles && mediaFiles.length > 0) {
for (let i = 0, total = mediaFiles.length; i < total; i++) {
if (renderer.renderers[options.prefix].canPlayType(mediaFiles[i].type)) {
node.setAttribute('src', mediaFiles[i].src);
let
index = 0,
total = mediaFiles.length
;
if (total > 0) {
for (; index < total; index++) {
if (renderer.renderers[options.prefix].canPlayType(mediaFiles[index].type)) {
node.setAttribute('src', mediaFiles[index].src);
break;

@@ -134,2 +144,16 @@ }

// Check if it current source can be played; otherwise, load next until no more options are left
node.addEventListener('error', function (e) {
// Reload the source only in case of the renderer is active at the moment
if (e.target.error.code === 4 && isActive) {
if (index < total) {
node.src = mediaFiles[index++].src;
node.load();
node.play();
} else {
mediaElement.generateError('Media error: Format(s) not supported or source(s) not found', mediaFiles);
}
}
});
const event = createEvent('rendererready', node);

@@ -136,0 +160,0 @@ mediaElement.dispatchEvent(event);

2

src/js/renderers/soundcloud.js

@@ -37,3 +37,3 @@ 'use strict';

const player = SC.Widget(settings.iframe);
window['__ready__' + settings.id](player);
window[`__ready__${settings.id}`](player);
}

@@ -40,0 +40,0 @@ };

20

src/js/renderers/twitch.js

@@ -6,3 +6,3 @@ 'use strict';

*
* Uses <iframe> approach and uses Twitch API to manipulate it.
* Uses <iframe> approach and uses Twitch API to manipulate it. Collections are not supported by default.
* @see https://github.com/justintv/Twitch-API/blob/master/embed-video.md

@@ -41,3 +41,3 @@ */

const player = new Twitch.Player(settings.id, settings);
window['__ready__' + settings.id](player);
window[`__ready__${settings.id}`](player);
},

@@ -93,6 +93,6 @@

const paramParts = parameters[i].split('=');
if (~paramParts[0].indexOf('channel=')) {
if (~paramParts[0].indexOf('channel')) {
twitchId = paramParts[1];
break;
} else if (~paramParts[0].indexOf('video=')) {
} else if (~paramParts[0].indexOf('video')) {
twitchId = `v${paramParts[1]}`;

@@ -122,3 +122,3 @@ break;

const id = url.substring(url.lastIndexOf('/') + 1);
return /^\d+$/i.test(id) !== null ? 'v' + id : id;
return /^\d+$/i.test(id) ? `v${id}` : id;
},

@@ -133,3 +133,3 @@

*/
getTwitchType: (id) => /^v\d+/i.test(id) !== null ? 'video' : 'channel'
getTwitchType: (id) => /^v\d+/i.test(id) ? 'video' : 'channel'
};

@@ -371,3 +371,3 @@

// Twitch events
twitchPlayer.addEventListener('ready', () => {
twitchPlayer.addEventListener(Twitch.Player.READY, () => {
paused = false;

@@ -377,3 +377,3 @@ ended = false;

});
twitchPlayer.addEventListener('play', () => {
twitchPlayer.addEventListener(Twitch.Player.PLAY, () => {
if (!hasStartedPlaying) {

@@ -392,3 +392,3 @@ hasStartedPlaying = true;

});
twitchPlayer.addEventListener('pause', () => {
twitchPlayer.addEventListener(Twitch.Player.PAUSE, () => {
paused = true;

@@ -400,3 +400,3 @@ ended = false;

});
twitchPlayer.addEventListener('ended', () => {
twitchPlayer.addEventListener(Twitch.Player.ENDED, () => {
paused = true;

@@ -403,0 +403,0 @@ ended = true;

2

src/js/renderers/vimeo.js

@@ -42,3 +42,3 @@ 'use strict';

const player = new Vimeo.Player(settings.iframe);
window['__ready__' + settings.id](player);
window[`__ready__${settings.id}`](player);
},

@@ -45,0 +45,0 @@

18

src/js/utils/constants.js

@@ -40,2 +40,17 @@ 'use strict';

// Test via a getter in the options object to see if the passive property is accessed
export const SUPPORT_PASSIVE_EVENT = (() => {
let supportsPassive = false;
try {
const opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener('test', null, opts);
} catch (e) {}
return supportsPassive;
})();
// for IE

@@ -156,2 +171,3 @@ const html5Elements = ['source', 'track', 'audio', 'video'];

mejs.Features.supportsPointerEvents = SUPPORT_POINTER_EVENTS;
mejs.Features.supportsPassiveEvent = SUPPORT_PASSIVE_EVENT;
mejs.Features.hasiOSFullScreen = HAS_IOS_FULLSCREEN;

@@ -167,2 +183,2 @@ mejs.Features.hasNativeFullscreen = HAS_NATIVE_FULLSCREEN;

mejs.Features.requestFullScreen = requestFullScreen;
mejs.Features.cancelFullScreen = cancelFullScreen;
mejs.Features.cancelFullScreen = cancelFullScreen;

4

src/js/utils/polyfill.js

@@ -154,5 +154,5 @@ 'use strict';

if (/firefox/i.test(navigator.userAgent)) {
window.mediaElementJsOldGetComputedStyle = window.getComputedStyle;
var getComputedStyle = window.getComputedStyle;
window.getComputedStyle = (el, pseudoEl) => {
const t = window.mediaElementJsOldGetComputedStyle(el, pseudoEl);
const t = getComputedStyle(el, pseudoEl);
return (t === null) ? {getPropertyValue: function () {}} : t;

@@ -159,0 +159,0 @@ }

2

test/unit/utils.spec.js

@@ -362,3 +362,3 @@ 'use strict';

expect(media.formatType(url, type)).to.equal('audio/mp3');
expect(media.formatType(url, type)).to.equal('audio/mp3; codecs="avc1.42E01E, mp3a.40.2');
});

@@ -365,0 +365,0 @@ });

.versions

Sorry, the diff of this file is not supported yet

build/mediaelement-and-player.js

Sorry, the diff of this file is too big to display

build/mediaelement-and-player.min.js

Sorry, the diff of this file is too big to display

build/mediaelement-flash-video-hls.swf

Sorry, the diff of this file is not supported yet

build/mediaelement-flash-video.swf

Sorry, the diff of this file is not supported yet

build/mediaelement.js

Sorry, the diff of this file is too big to display

build/mediaelement.min.js

Sorry, the diff of this file is too big to display

build/mediaelementplayer-legacy.css

Sorry, the diff of this file is not supported yet

build/mediaelementplayer-legacy.min.css

Sorry, the diff of this file is not supported yet

build/mediaelementplayer.css

Sorry, the diff of this file is not supported yet

build/mediaelementplayer.min.css

Sorry, the diff of this file is not supported yet

changelog.md

Sorry, the diff of this file is too big to display

src/css/mediaelementplayer-legacy.css

Sorry, the diff of this file is not supported yet

src/css/mediaelementplayer.css

Sorry, the diff of this file is not supported yet

src/flash/flash-video-hls/HlsMediaElement.as

Sorry, the diff of this file is not supported yet

src/flash/flash-video/VideoMediaElement.as

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc