CODEWITHSUNDEEP
javascriptjqueryjwplayer
Peter
Peter

Reputation: 3184

Load video into JW Player using jQuery

So following JW Player's I can get a video to load (obviously) it looks like this:

<script type="text/javascript" src="/scripts/jwplayer.js"></script>
<div id="myElement">Loading the player ...</div>
<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "/uploads/example.mp4",
        height: 360,
        image: "/uploads/example.jpg",
        width: 640
    });
</script>

I'm trying to accomplish something to this effect to load a video inside of a modal once that modal is triggered (using jQuery):

$("body").on('click', '[data-toggle=modal]', function(e){
   var vid = $(this).attr('data-video');
   jwplayer("videoElement").setup({ file: vid, width: 540 });
   jwplayer("videoElement").play();
});

However I'm getting the error: Uncaught TypeError: Cannot call method 'setup' of null

I've tried the other following (probably horrible) ideas I've had:

$("#videoElement").jwplayer.setup({ file: vid, width: 540 });

and

var $jwplayer = jwplayer();
$("body").on('click', '[data-toggle=modal]', function(e){
  $jwplayer("videoElement").setup({ file: vid, width: 540 });
}

However all yield the same result of Cannot call method 'setup' of null

Any pointers would be greatly appreciated.

Upvotes: 0

Views: 15707

Answers (2)

joncjordan
joncjordan

Reputation: 51

Add this script

<script>
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
   var vid = $(this).attr('data-video');
   jwplayer().load([{ file: vid }]);
   jwplayer().play();
});
</script>

Then format your link like this

<a href="#" data-toggle="modal" data-target="#videoModal" data-video="example.mp4">Video</a>

Upvotes: 1

Sam
Sam

Reputation: 2747

you don't have a videoElement on the page only myElement:

<div id="myElement">Loading the player ...</div>
<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "/uploads/example.mp4",
        height: 360,
        image: "/uploads/example.jpg",
        width: 640
    });
</script>

you must use:

jwplayer("myElement").setup({ file: vid, width: 540 });

Upvotes: 8

Related Questions