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

视频播放得很好（逐个播放），但海报没有显示。我通过警告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海报图片，而不会更改视频海报属性。

Answer 2

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

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

Answer 3

这是一种在视频结束时显示海报图像的简单方法。对于许多用例，这可以很容易地修改。

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

我发现了这个here并希望分享。

Answer 4

使用CSS - 更改background-image的{{1}}。 video.js海报图片是显示在视频元素顶部的div。

Answer 5

当您在ajax函数内调用videojs()时，播放器已经初始化，因此您传入的选项块（obj）将不会执行任何操作。您应该在首次初始化播放器时传递这些选项，或者直接设置每个属性。

但问题是你在设置新来源后立即调用play()，所以海报不应该显示出来。海报只是在播放开始之前显示。

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

5 个答案: