HTML 5 video js update source and play once loaded

Question

I am trying to change the source of a HTML 5 video using Video.js.

Source is changing and I can click play and it'll play the video, but I need video to play on an event. Specifically the loadedalldata event.

I've read the api documentation and it suggest, that what I've done should work (From my understanding.).

Javascript:

var player = _V_('video'),
    video = [{
        "type": "video\/mp4",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.mp4"
    }, {
        "type": "video\/webm",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.webm"
    }, {
        "type": "video\/ogg",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.ogv"
    }, {
        "type": "video\/flv",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.flv"
    }];

/* Add sources to new player */
player.src(video);

/* Remove loader & play video once loaded */
player.on("loadedalldata", function(){
    console.log('test');
    //app.player.play();
});

HTML:

<video class="video-js" id="video" controls preload="none" width="572" height="356" data-setup="{}"></video>

Answer 1

Try listening to a similar event that is dispatched directly from the video element.

document.querySelector("#video").addEventListener("canplaythrough", onLoaded)