javascript - 使用 jQuery 将视频加载到 JW Player

Question

因此，在 JW Player 之后，我可以加载一个视频（显然），它看起来像这样：

<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

您只有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 });

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>