可以'不要让popcorn.js工作

can't make popcorn.js work

本文关键字：popcorn js 工作 可以      更新时间：2023-09-26

我认为这是一个非常基本/愚蠢的问题，但我不明白我做错了什么。。。我想使用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是唯一工作的部件。。。

以下是您发布的实际操作。

在你的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);
相关文章：