我有一个包含10个视频的导航(菜单)栏,我希望一键显示每个视频及其脚注。现在,只需单击一下,每个视频都会出现,但是我不知道如何处理不同的脚注?
这是我的HTML:
<div id="menu">
<uL>
<li>Choose a Country:</li>
<li><a href="javascript:changeSource1();">US</a></li>
<li><a href="javascript:changeSource2();">Canada</a></li>
</ul>
</div>
<div id="content">
<div class="video-player">
<video id="videos" controls>
<source id="mp4" src="Video/(name of the video).mp4" type="video/mp4" />
<source id="ogv" src="Video/(name of the video).ogv" type="video/ogg" />
</video>
</div>
<div id="video-text">
<p id="popcorn-text">Ipsum Lorem...Aenean consectetur ornare pharetra. Praesent et urna eu justo convallis sollicitudin. Nulla porttitor mi euismod neque vulputate sodales. </p>
</div>
</div>
这是我的POPCORNJS代码,仅适用于视频:
<script>
function changeSource1()
{
document.getElementById("mp4").src= "Video/(name of the video).mp4";
document.getElementById("ogv").src= "Video/(name of the video).ogv";
document.getElementById("videos").load();
}
</script>
如何使用popcornjs代码实现多功能(例如为每个视频显示不同的脚注)?
谢谢,
ñ
最佳答案
您可以根据需要设置任意数量的Popcorn实例,因此在这里为每个视频设置一个实例是有意义的。每个爆米花实例都会有自己的脚注集,我们将从数组开始,并动态设置每个视频。
var data = [
{
src: {
mp4: 'video1.mp4', webm: 'video1.webm', ogg: 'video1.ogv'
},
footnotes: [
{
start: 2,
end: 4,
text: 'Ipsum Lorem...'
}
// etc.
]
}
// etc.
];
现在,设置爆米花实例,加载数据,并添加单击事件处理程序以进行切换。
var activeVideo = data[0];
//Popcorn provides this handy 'forEach' helper
Popcorn.forEach(data, function(vid, i) {
var button;
vid.video = document.createElement('video');
Popcorn.forEach(vid.src, function(src, type) {
var source = document.createElement('source');
source.setAttribute('src', src);
source.setAttribute('type', 'video/' + type);
vid.video.appendChild(source);
});
vid.video.preload = true; //optional
document.getElementById('').appendChild(vid.video);
if (i) {
vid.video.style.display = 'none';
}
vid.popcorn = Popcorn(vid.video);
//every footnote needs a target
vid.popcorn.defaults('inception', {
target: 'video-text'
});
Popcorn.forEach(vid.footnotes, function(footnote) {
vid.popcorn.footnote(footnote);
});
button = document.getElementById('button' + i); // or create one here
button.addEventListener('click', function() {
//pause and hide the old one
activeVideo.popcorn.pause();
activeVideo.style.display = 'none';
activeVideo = data[i];
activeVideo.style.display = '';
activeVideo.popcorn.play();
});
});
那应该就做。
一个问题是,这在iPad上将不起作用,因为如果您在页面上提供多个视频,则Mobile Safari会发疯。在这种情况下,只需创建一个视频元素,然后在点击处理程序中设置src属性(仅限mp4)并调用
.load()
。您仍然可以在同一视频标签上拥有多个Popcorn实例,但是当您“停用”一个实例时,只需调用.disable('footnote')
即可避免在错误的视频上显示脚注,并在活动的视频上运行enable
。