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

【问题标题】：Videojs - how to change video poster dynamicallyVideojs - 如何动态更改视频海报
【发布时间】：2013-10-09 11:07:36
【问题描述】：

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

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 进行了测试，它是正确的。请帮帮我。

亲切的问候，唐

【问题讨论】：

标签： javascript ajax json video.js poster

【解决方案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 海报图片，不会更改视频海报属性。

【讨论】：

【解决方案2】：

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

用myPlayer.poster(POSTERURL) 设置新海报，然后用myPlayer.src({type: TYPE, src: VIDEOURL}) 设置新来源。设置来源将重置播放器并显示海报。

或者，使用播放列表插件：https://github.com/brightcove/videojs-playlist

【讨论】：

【解决方案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 并想分享。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

当您在 ajax 函数中调用 videojs() 时，播放器已经初始化，因此您传入的选项块 (obj) 不会做任何事情。您应该在第一次初始化播放器时传入这些选项，或者直接设置每个属性。

但问题是您在设置新来源后立即调用play()，因此海报无论如何都不应该显示。海报仅在播放开始前展示。

【讨论】：

播放器第一次初始化时，下一个视频的海报还没有出现。我只是觉得如果我们可以改变视频来源，为什么不能改变海报？我希望在下载视频时显示海报。我该怎么办？亲切的问候，
这似乎不是一个正确的答案，请举例说明。谢谢