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

score 11 · Answer 1 · answered May 22 '14 at 16:41

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.

misterben · Accepted Answer · 2019-07-23T09:53:11.957

4

[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

edited Jul 23 '19 at 09:53

answered Oct 09 '13 at 12:49

misterben

7,455
2
26
47

catch22 · Answer 3 · 2017-03-31T04:31:23.340

3

Here is a really simple way to show the poster image when the video ends. This can be pretty easily modified for many use cases.

videoJS('#theVideo').on('ended', function() {
  var videoposter = "poster-image-file.jpg";
  $('.vjs-poster').css({
    'background-image': 'url('+videoposter+')',
    'display': 'block'
  });
  this.posterImage.show()
});

I found out about this here and wanted to share.

edited Mar 31 '17 at 04:31

answered Feb 09 '16 at 18:19

catch22

391
1
3
13

user3303414 · Answer 4 · 2014-05-21T09:43:13.013

You'll get best results if you set the poster attribute of the encapsulated video- element directly. I loaded the new poster after the new vid in the background.

changeVideoSrc = function(url) {
                var myPlayer = videojs('playerId'),
                            videoSrc = options.promoLocation + url,
                poster = videoSrc.replace(/.mp4/, '.jpg');

                            myPlayer.posterImage.show();
                    myPlayer.src({type: "video/mp4", src: videoSrc});

                    myPlayer.one('canplay', function() {
                    $('video').attr('poster', poster);
                    });
};

score -1 · Answer 5 · answered Oct 09 '13 at 22:39

-1

When you call, videojs() inside the ajax function, the player has already been initialized, so the options block (obj) that you're passing in wont' do anything. You should either pass in those options when the player is first initialized, or set each property directly.

But the thing is you're also calling play() immediately after setting the new source, so the poster shouldn't ever show anyway. The poster is only meant to show until playback is started.

answered Oct 09 '13 at 22:39

heff

3,171
1
20
21

When the player is first initialized the poster of the next video has not been available yet. I just think that if we can change the video source, why cannot change the poster? I want the poster is showed when the video is downloading. What should I do? Kind regards, – Thang Oct 10 '13 at 08:20
This seems to be not a correct answer, please elaborate more with some examples. thanks – Omer Aug 27 '18 at 09:25

Videojs - how to change video poster dynamically

5 Answers5