[SOLVED] Videojs - how to change video poster dynamically

Videojs - how to change video poster dynamically

I want to make a playlist and the video source and poster is loaded dynamically. This is my code

var myFunc = function(){
var myPlayer = this;
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        if (xmlhttp.responseText != 'false') {
            var obj = eval ("(" + xmlhttp.responseText + ")");
            // update the video source
            myPlayer = myPlayer.src(obj.videoFiles);
            // update the video poster
            obj = eval ("(" + '{"controls": true, "autoplay": false, "preload": "auto", "poster": "' + obj.posterUrl + '"}' + ")");
            myPlayer = videojs("playlist", obj);
            // start playback
            myPlayer.play();
        }
    }
}
xmlhttp.open("GET",...,true);
xmlhttp.send();
};

var myPlayer = videojs("playlist");
myPlayer.on("ended", myFunc);

The videos are played well (one by one) but the posters does not show. I have tested by alert the obj.posterUrl and it is correct. Please help me.

Kind regards, Thang

Solution

[Original answer is not correct for any remotely recent version of Video.js]

Set the new poster with myPlayer.poster(POSTERURL), then set the new source with myPlayer.src({type: TYPE, src: VIDEOURL}). Setting the source will reset the player and show the poster.

Alternatively, use the playlist plugin: https://github.com/brightcove/videojs-playlist