使用 jQuery 将视频加载到 JW 播放器中

Question

所以在 JW 播放器之后，我可以加载一个视频（显然）它看起来像这样：

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

$("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

我已经尝试了以下其他（可能很糟糕）的想法：

$("#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

任何指示将不胜感激。

Answer 1

你没有

videoElement 在页面上只有 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>

您必须使用：

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

Answer 2

添加此脚本

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

然后像这样格式化您的链接

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