我應該如何使用帶有內容的同步HTML5視頻

我想在網站上播放視頻期間顯示不同的與上下文相關的內容。我正在使用HTML5視頻，需要一個JavaScript API來處理事件。我需要控制視頻播放器，並對視頻中的不同時間間隔做出反應。我應該如何使用帶有內容的同步HTML5視頻

2011-08-30 Banzor

Popcorn.js是一個開源的JavaScript庫，用於編寫HTML5視頻和音頻元素豐富的互動體驗，並提供了一個非常簡單的API來「在網站上播放視頻時顯示不同的上下文相關內容」。

這裏是一個教程，建立與Popcorn.js，展示瞭如何創建一個簡單的Popcorn.js程序：http://popcornjs.org/popcorn-101

該文檔可這裏找到：http://popcornjs.org/api（這仍在進行中）

下面的示例使用的爆米花腳註插件在播放期間在特定時間顯示視頻下一個簡單的信息：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Popcorn Simple Example</title> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> 

    <script> 
    $(document).bind("ready", function(){ 
     // Create a popcporn instance by calling Popcorn("#id-of-my-video") 
    var pop = Popcorn("#video"); 


    // add a footnote at 2 seconds 
    pop.footnote({ 
      start: 2, 
      end: 6, 
      text: "This footnote is the stepping stone of progress!", 
      target: "footnote-container" 
     }); 

    // play the video right away 
    pop.play(); 

    }); 
    </script> 
</head> 
<body> 
    <video height="180" width="300" id="video" controls> 
    <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source> 
    <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> 
    <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> 
    </video> 


<div id="footnote-container"></div> 
</body> 
</html>

工作示例這裏：http://jsfiddle.net/rwaldron/6PEU8/

最近的演示展示瞭如何使用音頻元素作爲幻燈片控制器，在這裏：http://jsfiddle.net/rwaldron/DjmLM/

來源

2011-08-30 20:36:04 Rick

驚人，Popcorn.js正是我一直在尋找！ – Banzor

+1爲Popcorn.js – Tomgrohl

我應該如何使用帶有內容的同步HTML5視頻

回答

相關問題