與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。