不能让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工作

回答

相关问题