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.

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/13517783/load-video-into-jw-player-using-jquery

标签

javascript

jquery

jwplayer