javascript Videojs - 如何动态更改视频海报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19270361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Videojs - how to change video poster dynamically
提问by Thang
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.
视频播放得很好（一个接一个），但海报没有显示。我已经通过警报 obj.posterUrl 进行了测试，它是正确的。请帮我。
Kind regards, Thang
亲切的问候， 唐
采纳答案by misterben
[Original answer is not correct for any remotely recent version of Video.js]
[对于任何远程最近版本的 Video.js，原始答案都不正确]
Set the new poster with myPlayer.poster(POSTERURL), then set the new source with myPlayer.src({type: TYPE, src: VIDEOURL}). Setting the source will reset the player and show the poster.
用 设置新海报myPlayer.poster(POSTERURL)，然后用 设置新源myPlayer.src({type: TYPE, src: VIDEOURL})。设置源将重置播放器并显示海报。
Alternatively, use the playlist plugin: https://github.com/brightcove/videojs-playlist
或者，使用播放列表插件：https: //github.com/brightcove/videojs-playlist
回答by b.kelley
Typing in videojs('YOUR_VID_ID').posterin the console displays
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');
}
So you should be able to do something like: myPlayer.poster( obj.posterUrl );
因此，您应该能够执行以下操作： myPlayer.poster( obj.posterUrl );
Note:this will only change the VideoJS poster image, not the video poster attribute.
注意：这只会更改 VideoJS 海报图像，而不是视频海报属性。
回答by catch22
Here is a really simple way to show the poster image when the video ends. This can be pretty easily modified for many use cases.
这是在视频结束时显示海报图像的一种非常简单的方法。对于许多用例，这可以很容易地修改。
videoJS('#theVideo').on('ended', function() {
var videoposter = "poster-image-file.jpg";
$('.vjs-poster').css({
'background-image': 'url('+videoposter+')',
'display': 'block'
});
this.posterImage.show()
});
I found out about this hereand wanted to share.
我在这里发现了这个并想分享。
回答by user3303414
You'll get best results if you set the poster attribute of the encapsulated video- element directly. I loaded the new poster after the new vid in the background.
如果直接设置封装的 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);
});
};
回答by heff
When you call, videojs()inside the ajax function, the player has already been initialized, so the options block (obj) that you're passing in wont' do anything. You should either pass in those options when the player is first initialized, or set each property directly.
当您调用videojs()ajax 函数时，播放器已经初始化，因此obj您传入的选项块 ( ) 不会执行任何操作。您应该在首次初始化播放器时传入这些选项，或者直接设置每个属性。
But the thing is you're also calling play()immediately after setting the new source, so the poster shouldn't ever show anyway. The poster is only meant to show until playback is started.
但问题是您play()在设置新源后也会立即调用，因此无论如何都不应该显示海报。海报仅在播放开始之前显示。
