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は私の例題がうまく機能しませんでしたか？ –

遅れて申し訳ありません。あなたのサンプルがうまくいきましたが、私のコードでタイムライン（奇妙なレイアウト）が見えますが、私はまだサブを持っていません。 – Jan

popcorn.jsの仕事をすることはできません

答えて

関連する問題