popcorn image plugin not working

StackOverflow https://stackoverflow.com/questions/23382076

문제

I just can't seem to get popcorn image plugin or any other plugins for that matter to work. And I'm not sure why. Here is the code that's inside file.js. 

var popcorn = Popcorn( "#video1" )
    popcorn.play()

       popcorn.image({
       start: 5,
       end: 15,
       src: "http://www.usm.edu/news/sites/default/files/Prism%20Concert.jpg",
       target: "image"
       });

Here is the code that's inside file.html .

<div><video id="video1">
<source src="videos/Makeurbed.mp4" height="400" width="800">
</video></div>

Here is the code that links my file.js to my file.html. It's inside the head of my html file.

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
    <script src="js/popcorn-complete.min.js" type="text/javascript"></script>
    <script src="js/file.js" type="text/javascript"></script>
</head>

Is there something I'm missing?

도움이 되었습니까?

해결책

I think you need to add that semicolon

var popcorn = Popcorn( "#video1" );
popcorn.play();

apart from that you also need that div with id image as you have mentioned it in target.

add like this:

<div><video id="video1" height="400" width="800" controls>
<source src="videos/Makeurbed.mp4">
</video></div>
<div id="image"></div>

also remember that the mp4 format is not supported by all browsers and viceversa , it is always better to add more file formats.

like this :

<div><video id="video1" height="400" width="800" controls>
<source src="videos/Makeurbed.mp4"></source>
<source src="videos/Makeurbed.ogv"></source>
<source src="videos/Makeurbed.webm"></source>
</video></div>
<div id="image"></div>

also add the height and width inside the video tag , not inside source tag

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top