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

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

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

视频播放得很好（一个接一个），但海报没有显示出来。我已经通过obj.posterUrl进行了测试，结果是正确的。请帮帮我

亲切问候,，

---

Thang

[原始答案对于任何远程最新版本的Video.js都不正确]

使用

myPlayer.poster（POSTERURL）

设置新海报，然后使用

myPlayer.src（{type:type，src:VIDEOURL}）设置新源代码

。设置源将重置播放机并显示海报

---

或者，使用播放列表插件：

当您在ajax函数中调用，

videojs（）

时，播放器已经初始化，因此您传递的选项块（

obj

）不会做任何事情。您应该在播放器首次初始化时传入这些选项，或者直接设置每个属性

---

但问题是，在设置新源代码后，您也会立即调用

play（）

，因此海报无论如何都不会显示。海报仅在播放开始前显示。

如果直接设置封装视频元素的海报属性，将获得最佳效果。我在背景中的新视频之后加载了新海报

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

键入

videojs（“您的视频ID”）。在控制台中显示海报

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海报图像，而不会更改“视频海报”属性。
这是一种在视频结束时显示海报图像的简单方法。对于许多用例，这可以很容易地修改

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

我发现了这一点，并想与大家分享。
当播放器首次初始化时，下一个视频的海报还没有发布。我只是想，如果我们能改变视频来源，为什么不能改变海报？我希望在下载视频时显示海报。我该怎么办？您好，这似乎不是一个正确的答案，请举例说明。谢谢