我正在video.js上使用一个名为videojs-overlay的插件。这使我可以向播放列表中的单个视频添加重叠式广告。
我现在想扩展此功能,以允许在不同的视频上显示不同的叠加层(这些叠加层是在方法内部定义的)。我不知道这是什么问题。如何遍历此对象以访问播放列表中不同视频上的每个重叠式广告?
player.playlist()方法-定义不同的视频:
player.playlist([{
name: 'Video 1',
overlays: [{
content: '<div class="overlay-1a"></div>',
showBackground: false,
start: 'pause',
end: 'play',
align: 'left-middle'
},
{
content: '<div class="overlay-1b"></div>',
showBackground: false,
start: 'pause',
end: 'play',
align: 'right-middle'
}
]
},
{
name: 'Video 2',
overlays: [{
content: '<div class="overlay-2a"></div>',
showBackground: false,
start: 'pause',
end: 'play',
align: 'left-middle'
},
{
content: '<div class="overlay-2b"></div>',
showBackground: false,
start: 'pause',
end: 'play',
align: 'right-middle'
}
]
}
]);
播放列表中的视频发生更改时事件的代码:我希望此事件中的重叠式广告更新,并且应该在每个视频中的每个视频上进行迭代。由于某些原因,这不起作用
player.on('playlistitem', function (event, video) {
player.playlist().overlays.forEach(function () {
player.overlay({
content: video.content,
showBackground: video.showBackground,
start: video.start,
end: video.end,
align: video.align,
class: video.class
});
});
答案 0 :(得分:0)
这可能就是你想要的
player.on('playlistitem', function (event, video) {
player.playlist().forEach(function(video) {
video.overlays.forEach(function (overlay) {
overlay({
content: video.content,
showBackground: video.showBackground,
start: video.start,
end: video.end,
align: video.align,
class: video.class
});
})
});
环绕每个视频,然后针对每个视频在每个覆盖上循环并更新覆盖。也许这...
player.on('playlistitem', function (event, video) {
var playlist =player.playlist();
playlist = playlist.map(function(video) {
video.overlays.map(function (overlay) {
overlay({
content: video.content,
showBackground: video.showBackground,
start: video.start,
end: video.end,
align: video.align,
class: video.class
});
});
player.playlist(playlist);
});