使用jQuery将视频加载到JW Player中

问题描述：

因此，在JW Player播放后，我可以加载视频(显然)是这样的:

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>

我正在尝试实现某种效果，以便在触发模态后(使用jQuery)将视频加载到模态内部:

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

但是我遇到错误: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 });

和

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

但是，所有结果都产生Cannot call method 'setup' of null

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

任何指针将不胜感激.

答

您仅在 myElement 页面上没有 videoElement :

<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>

您必须使用:

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

使用jQuery将视频加载到JW Player中

相关推荐