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

您在页面上没有 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>

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

2 个答案: