Question

我认为这是一个非常基本/愚蠢的问题，但我无法理解我做错了什么...我想使用popcorn.js为html5视频添加字幕和时间表。

这是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是唯一正在工作的部分......

Answer 1

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);

不能让popcorn.js工作

1 个答案: