加载新视频时,videojs 播放列表播放率不会持续存在
videojs playlist playbackRate does not persist when new video loads
我已经使用 videojs 和 videojs 播放列表插件成功地建立了一个视频播放列表。在播放视频时,如果您将播放速率从 1 更改为 2,当视频自动前进到列表中的下一个视频时,播放速率默认返回到 1,您必须再次重新调整。问题是如何让 playbackRate 持续存在?
虽然我可以获取playbackRate,也可以设置playbackRate,但是我不能让它持久化。除了写到隐藏的div,还有更优雅的解决方案吗?
我有以下代码:
// JavaScript Document
var videoList = [{
sources: [{
src: 'http://localhost/gpifmlocal/publichtml/eUFM/1_intro.mp4',
type: 'video/mp4'
}],
poster: ''
},{
sources: [{
src: 'http://localhost/gpifmlocal/publichtml/eUFM/2_UFM_barter.mp4',
type: 'video/mp4'
}],
poster: ''
},{
sources: [{
src: 'http://localhost/gpifmlocal/publichtml/eUFM/3_UFM_goldsmith.mp4',
type: 'video/mp4'
}],
poster: ''
} ];
var player = videojs(document.querySelector('video'), {
inactivityTimeout: 0
});
player.playlist(videoList);
document.querySelector('.previous').addEventListener('click', function() {
var playing = player.playlist.currentItem();
player.playlist.currentItem(playing -1);
});
document.querySelector('.next').addEventListener('click', function() {
var playing = player.playlist.currentItem();
player.playlist.currentItem(playing +1);
});
var onlinevideo =document.querySelectorAll('.onlinevideo');
for(var i=0;i<onlinevideo.length;i++){
onlinevideo[i].addEventListener('click',videonumber);
}
function videonumber(){
var vid = parseInt($(this).attr('data-vid'));
if (!player.play()) {
player.play();
}else{
player.playlist.currentItem(vid);
// var playrate = parseFloat(player.playbackRate());
// player.playbackRate(playrate);
}
$(this).css('color','green');
}
var endvideo = document.getElementsByTagName("video")[0];
endvideo.addEventListener("ended", function() {
var playing = player.playlist.currentItem();
$('a[data-vid]').each(function() {
var vid = parseInt($(this).attr('data-vid'))
if (vid ==playing){
$(this).css('color','green');
}
});
}, true);
player.playlist.autoadvance(JSON.parse(0));
非常抱歉,如果您深入研究,api 中的所有方法和事件都有一个 link:https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md#playlistitem
因此,为了回答我的问题,我简单地使用了:
var playrate;
player.on('beforeplaylistitem', function() {
playrate = player.playbackRate();
});
player.on('playlistitem', function() {
player.playbackRate(playrate);
});
我已经使用 videojs 和 videojs 播放列表插件成功地建立了一个视频播放列表。在播放视频时,如果您将播放速率从 1 更改为 2,当视频自动前进到列表中的下一个视频时,播放速率默认返回到 1,您必须再次重新调整。问题是如何让 playbackRate 持续存在?
虽然我可以获取playbackRate,也可以设置playbackRate,但是我不能让它持久化。除了写到隐藏的div,还有更优雅的解决方案吗?
我有以下代码:
// JavaScript Document
var videoList = [{
sources: [{
src: 'http://localhost/gpifmlocal/publichtml/eUFM/1_intro.mp4',
type: 'video/mp4'
}],
poster: ''
},{
sources: [{
src: 'http://localhost/gpifmlocal/publichtml/eUFM/2_UFM_barter.mp4',
type: 'video/mp4'
}],
poster: ''
},{
sources: [{
src: 'http://localhost/gpifmlocal/publichtml/eUFM/3_UFM_goldsmith.mp4',
type: 'video/mp4'
}],
poster: ''
} ];
var player = videojs(document.querySelector('video'), {
inactivityTimeout: 0
});
player.playlist(videoList);
document.querySelector('.previous').addEventListener('click', function() {
var playing = player.playlist.currentItem();
player.playlist.currentItem(playing -1);
});
document.querySelector('.next').addEventListener('click', function() {
var playing = player.playlist.currentItem();
player.playlist.currentItem(playing +1);
});
var onlinevideo =document.querySelectorAll('.onlinevideo');
for(var i=0;i<onlinevideo.length;i++){
onlinevideo[i].addEventListener('click',videonumber);
}
function videonumber(){
var vid = parseInt($(this).attr('data-vid'));
if (!player.play()) {
player.play();
}else{
player.playlist.currentItem(vid);
// var playrate = parseFloat(player.playbackRate());
// player.playbackRate(playrate);
}
$(this).css('color','green');
}
var endvideo = document.getElementsByTagName("video")[0];
endvideo.addEventListener("ended", function() {
var playing = player.playlist.currentItem();
$('a[data-vid]').each(function() {
var vid = parseInt($(this).attr('data-vid'))
if (vid ==playing){
$(this).css('color','green');
}
});
}, true);
player.playlist.autoadvance(JSON.parse(0));
非常抱歉,如果您深入研究,api 中的所有方法和事件都有一个 link:https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md#playlistitem
因此,为了回答我的问题,我简单地使用了:
var playrate;
player.on('beforeplaylistitem', function() {
playrate = player.playbackRate();
});
player.on('playlistitem', function() {
player.playbackRate(playrate);
});