kann nicht popcorn.js arbeiten

Ich denke, das ist eine sehr einfache/dumme Frage, aber ich kann nicht verstehen, was ich falsch mache ... Ich würde gerne Untertitel und eine Zeitleiste zu einem HTML5 Video hinzufügen popcorn.js.kann nicht popcorn.js arbeiten

Hier ist der html5 Code:

<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> 
(...)

Hier ist das Popcorn Teil:

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

Die pauseOnLinkClicked: true ist der einzige Teil, der Arbeit ist ...

Quelle

2016-11-08 Jan

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

In Ihrem JS du hattest

target: "timeline"

Satz zunächst, aber nachdem Sie wurden Einstellung

target: "#timeline"

auf die nächsten Elemente in der Timeline Array.

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

Quelle

2016-11-08 14:02:20

Vielen Dank für die Beantwortung. Sorry, ich habe vergessen, die Ziele zu ändern, aber ich sehe immer noch weder die Untertitel noch die Zeitleiste. – Jan

@Jan hat mein Beispiel nicht funktioniert? –

Entschuldigung für die Verzögerung. Ihr Beispiel funktioniert, jetzt in meinem Code Ich sehe die Timeline (mit einem seltsamen Layout), aber ich habe immer noch nicht die U-Boote, ich werde versuchen, etwas mehr daran zu arbeiten. – Jan

kann nicht popcorn.js arbeiten

Antwort

Verwandte Themen