Mediaelement,js canplay event not fired

683 views Asked by At

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');
}
0

There are 0 answers