不能讓popcorn.js工作

我認爲這是一個非常基本的/愚蠢的問題，但我不明白我在做什麼錯誤...我想添加字幕和時間軸到HTML5視頻使用popcorn.js。不能讓popcorn.js工作

這裏的HTML5代碼：

<script src="http://popcornjs.org/code/dist/popcorn-complete.js"> 
</script> 
(...) 
<nav id="timeline"> </nav> 
(...) 
<video id="video" controls> 
     <source src="media/ita.webm" type="video/webm"> 
     <source src="media/ita.mp4" type="video/mp4"> 
</video> 
(...)

這裏的爆米花部分：

document.addEventListener("DOMContentLoaded", function() { 
    var popcorn = Popcorn('#video', { pauseOnLinkClicked: true }); 

    popcorn.timeline({ 
      start: 1, 
      target: "timeline", 
      title: "This is a title", 
      text: "this is some interesting text that goes inside", 
      innerHTML: "Click here for <a href='http://www.google.ca'>Google</a>" , 
      direction: "down" 
     }) 
     .timeline({ 
      start: 3, 
      target: "#timeline", 
      title: "double as interesting", 
      text: "this is some interesting text that goes inside", 
      innerHTML: "Maybe a button? <button onClick=\"window.location.href='http://www.google.com'\">Click Me</button>", 
      direction: "down" 
     }) 
     .timeline({ 
      start: 7, 
      end: 10, 
      target: "#timeline", 
      title: "3x as interesting", 
      text: "this is some interesting text that goes inside", 
      innerHTML: "", 
      direction: "down" 
     }); 

     popcorn.subtitle({ 
       start: 1, 
       end: 5, 
       text: "Subtitle", 
      }); 

     popcorn.play(); 

}, false);

的pauseOnLinkClicked: true是的工作只有一部分...

來源

2016-11-08 Jan

Here's what you've posted working in action.

在你JS你有

target: "timeline"

集開始，但你設置

target: "#timeline"

在時間軸上數組的下一個元素

後。

HTML：

<html> 
    <head> 
     <title>PopcornJS Test</title> 
     <script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script> 
    </head> 

    <body> 
     <nav id="timeline"></nav> 
     <video id="video" controls> 
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/webm"> 
      <source src="media/ita.mp4" type="video/mp4"> 
     </video> 
    </body> 
</html>

JS：

document.addEventListener("DOMContentLoaded", function() { 
    var popcorn = Popcorn('#video', { pauseOnLinkClicked: true }); 

    popcorn.timeline({ 
      start: 1, 
      target: "timeline", 
      title: "This is a title", 
      text: "this is some interesting text that goes inside", 
      innerHTML: "Click here for <a href='http://www.google.ca'>Google</a>" , 
      direction: "down" 
     }) 
     .timeline({ 
      start: 3, 
      target: "timeline", 
      title: "double as interesting", 
      text: "this is some interesting text that goes inside", 
      innerHTML: "Maybe a button? <button onClick=\"window.location.href='http://www.google.com'\">Click Me</button>", 
      direction: "down" 
     }) 
     .timeline({ 
      start: 7, 
      end: 10, 
      target: "timeline", 
      title: "3x as interesting", 
      text: "this is some interesting text that goes inside", 
      innerHTML: "", 
      direction: "down" 
     }); 

     popcorn.subtitle({ 
      start: 1, 
      end: 5, 
      text: "Subtitle", 
     }); 

     popcorn.play(); 

}, false);

來源

2016-11-08 14:02:20

感謝您的回答。對不起，我忘了改變目標，但無論如何，我還沒有看到字幕和時間軸。 – Jan

@Jan做我的例子不工作？ –

對不起。您的示例工程，現在在我的代碼中，我看到了時間軸（具有奇怪的佈局），但我仍然沒有subs，我會嘗試再處理它。 – Jan

不能讓popcorn.js工作

回答

相關問題