I am using Mediaelement.js ver: 2.16.2 canplay envent is not fired if using youtube plugin and the plugin is rendered using a IFrame.
If this a known bug or should it be working?
I should add that the compination of the Youtube plugin with IFrame happens on Android devices.
I had a look at the sourcecode and if I am not mistaken it seams that 'canplay' event is not called when iframe is used.
Should this:
mejs.YouTubeApi.createEvent(player, pluginMediaElement, 'canplay');
code be called in the iframe 'onready' event?
Youtube plugin with iframe:
iFrameReady: function () {
this.isLoaded = true;
this.isIframeLoaded = true;
while (this.iframeQueue.length > 0) {
var settings = this.iframeQueue.pop();
this.createIframe(settings);
}
}
createIframe: function (settings) {
var
pluginMediaElement = settings.pluginMediaElement,
player = new YT.Player(settings.containerId, {
height: settings.height,
width: settings.width,
videoId: settings.videoId,
playerVars: { controls: 0 },
events: {
'onReady': function () {
// hook up iframe object to MEjs
settings.pluginMediaElement.pluginApi = player;
// init mejs
mejs.MediaPluginBridge.initPlugin(settings.pluginId);
// create timer
setInterval(function () {
mejs.YouTubeApi.createEvent(player, pluginMediaElement, 'timeupdate');
}, 250);
},
'onStateChange': function (e) {
mejs.YouTubeApi.handleStateChange(e.data, player, pluginMediaElement);
}
}
});
}
Youtube plugin with flash:
flashReady: function (id) {
var
settings = this.flashPlayers[id],
player = document.getElementById(id),
pluginMediaElement = settings.pluginMediaElement;
// hook up and return to MediaELementPlayer.success
pluginMediaElement.pluginApi =
pluginMediaElement.pluginElement = player;
mejs.MediaPluginBridge.initPlugin(id);
// load the youtube video
player.cueVideoById(settings.videoId);
var callbackName = settings.containerId + '_callback';
window[callbackName] = function (e) {
mejs.YouTubeApi.handleStateChange(e, player, pluginMediaElement);
}
player.addEventListener('onStateChange', callbackName);
setInterval(function () {
mejs.YouTubeApi.createEvent(player, pluginMediaElement, 'timeupdate');
}, 250);
mejs.YouTubeApi.createEvent(player, pluginMediaElement, 'canplay');
}