Multiple players with JW Player?

Question

Trying to implement multiple players with JW Player. ive tried a few ways and looked at the docs but im not quite sure why the code is breaking.

Code snippets shown below:

In head:

<script type='text/javascript' src='/jwplayer/jwplayer.js'></script>

JS:

    $('video').jwplayer({
        flashplayer: '/jwplayer/player.swf',
        controlbar: 'none',
        stretching: 'fill',
        height: 120,
        width: 120
     });

HTML:

<video  id="video" src="/media/original/original-video.mp4">Loading Video ...</video>

The error I receive is:

$("video").jwplayer is not a function

Now i thought this meant the jwplayer.js file was not being loaded. then i read maybe its because the shorthand $ is not being picked up so i tried jQuery. None worked. However when I change the javascript so that it plays a SINGLE video eg:

    jwplayer('video').setup({
        flashplayer: '/jwplayer/player.swf',
        controlbar: 'none',
        stretching: 'fill',
        height: 120,
        width: 120
     });

The code actually works. However this requires all my video tags to have the same ID. Which I cant do as i want multiple players.

Any help would be really appreciated. An example would be even better! Thanks for reading.

Answer 1

i found the answer. It was a simple one to! just had to add in a jQuery each() so that every tag was initialized :)

Hope this helps someone else:

$('video').each(function(){
    jwplayer(this.id).setup({
        flashplayer: '/jwplayer/player.swf',
        controlbar: 'none',
        height: 120,
        width: 120      
    });
});