Videojs - how to change video poster dynamically

Question

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

Answer 1

Typing in videojs('YOUR_VID_ID').poster in the console displays

function (src){
  if (src === undefined) {
    return this.poster_;
  }

  // update the internal poster variable
  this.poster_ = src;

  // update the tech's poster
  this.techCall('setPoster', src);

  // alert components that the poster has been set
  this.trigger('posterchange');
} 

So you should be able to do something like: myPlayer.poster( obj.posterUrl );

Note: this will only change the VideoJS poster image, not the video poster attribute.