Popcorn popcorn.js開/關按鈕字幕/標題

我正在使用popcorn.js爲我的視頻添加一些字幕/標題。這些會自動顯示在視頻中。我目前正在使用html和JavaScript創建自定義視頻控件。我想要一個我創建的按鈕來打開和關閉字幕。Popcorn popcorn.js開/關按鈕字幕/標題

這裏是我的html按鈕和視頻（目前的onclick功能「標題」爲空）

<input type="button" value="Captions" id="captions" onclick="Captions()" class="button"/> 

<video id="video" width="896" height="504" data-setup="{}" > 
<source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
<source src="video/MyVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'> 
<source src="video/MyVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
<p>Your browser doesn't support HTML5. Maybe you should upgrade.</p> 
</video>

下面是使用爆米花

我的一些JavaScript代碼

document.addEventListener("DOMContentLoaded", function() { 

     var popcorn = Popcorn("#video");true; 


     popcorn.subtitle({ 
      start: .5, 
      end: 2.5, 
      text: "Subtitle Text" 

     popcorn.subtitle({ 
      start: 2.5, 
      end: 9.5, 
      text: "Or captions" 
     }); 
     }, false);

我是新來的JavaScript所以任何幫助，將不勝感激。

更新：如何獲取它以便字幕不會自動播放。我希望他們在視頻開始播放時關閉。

來源

2013-01-04 Noob_C

爆米花有enable和disable方法，可以打開和關閉任何給定的插件。

因爲您在事件偵聽器函數中定義了爆米花實例，所以您還需要在其中設置點擊處理函數。因此，對於您的HTML ...

<input type="button" value="Captions" id="captions" class="button"/>

而且你的腳本...

document.addEventListener("DOMContentLoaded", function() { 

    var popcorn = Popcorn("#video"); 
    var showSubtitles = true; 
    document.getElementById('captions').addEventListener('click', function() { 
     //toggle subtitles 
     showSubtitles = !showSubtitles; 
     if (showSubtitles) { 
      popcorn.enable('subtitle'); 
     } else { 
      popcorn.disable('subtitle'); 
     } 
    }, false); 

    /* fill in your subtitles here... */ 
}, false);

官方文檔在這裏：http://popcornjs.org/popcorn-docs/media-methods/#disable

來源

2013-01-09 06:08:10 brianchirls

我的天哪謝謝你這麼多！有用！！唯一的一點是，標題自動顯示。我怎樣才能設置它，使它們只在點擊按鈕時才顯示出來。謝謝！！ –

另外我怎樣才能得到它，以便按鈕上顯示「字幕開啓」和字幕關閉「在其各種狀態。對不起，我知道這是如此基本，但我是JavaScript新手 –

好吧我想出了」Caption on 「和字幕」文字。我添加了 document.getElementById（「captions」）。value =「captions off」;在popcorn.enable（'subtitle'）下面的 ;儘管 –

Popcorn popcorn.js開/關按鈕字幕/標題

回答

相關問題