javascript - Videojs - 如何动态更改视频海报

Question

我想制作一个播放列表，视频源和海报是动态加载的。这是我的代码

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);

视频播放良好(一个接一个)，但海报不显示。我已经通过 alert obj.posterUrl 进行了测试，它是正确的。请帮助我。

亲切的问候， 唐

Answer 1

在控制台显示中输入 videojs('YOUR_VID_ID').poster

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

因此您应该能够执行如下操作:myPlayer.poster( obj.posterUrl );

注意:这只会更改 VideoJS 海报图像，不会更改视频海报属性。