3

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

4

5 回答 5

9

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 海报图像，而不是视频海报属性。

于 2014-05-22T16:41:16.237 回答
4

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

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

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

于 2013-10-09T12:49:12.923 回答
2

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

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

我在这里发现了这一点并想分享。

于 2016-02-09T18:19:12.017 回答
1

如果您直接设置封装的 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);
                    });
};
于 2014-05-21T09:36:50.383 回答
-1

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

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

于 2013-10-09T22:39:12.923 回答