与popcornjs，如何播放视频并在一个点击显示脚注？

Question

我有一个包含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代码（如显示不同的注脚为每个视频）？ 谢谢， N

Answer 1

你可以有任意多的爆米花实例，所以在这里它是有道理的每个视频有一个。每个爆米花都有自己的一套脚注。我们将从一个数组开始，并动态设置每个视频。

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）并调用​​。您仍然可以在同一个视频标签上放置多个Popcorn实例，但是当您“停用”某个实例时，只需拨打.disable('footnote')即可避免在错误的视频中显示脚注并在活动视频上运行enable。