popcorn image plugin not working

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?

Solution

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