javascript 使用 jQuery 将视频加载到 JW Player
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13517783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load video into JW Player using jQuery
提问by Peter
So following JW Player's I can get a video to load (obviously) it looks like this:
所以跟随 JW Player's 我可以得到一个视频来加载（显然）它看起来像这样：
<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):
我正在尝试实现某种效果，以便在触发模态后在模态内加载视频（使用 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
但是我收到错误： 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
然而，所有产生相同的结果 Cannot call method 'setup' of null
Any pointers would be greatly appreciated.
任何指针将不胜感激。
回答by Sam
you don't have a videoElementon the page only myElement:
您在页面上没有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>
you must use:
你必须使用：
jwplayer("myElement").setup({ file: vid, width: 540 });
回答by joncjordan
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>
