你如何使用 jQuery 更改视频源？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3983036/
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
How do you change video src using jQuery?
提问by Aximili
How do you change the src of a HTML5 video tag using jQuery?
如何使用 jQuery 更改 HTML5 视频标签的 src？
I got this HTML:
我得到了这个 HTML：
<div id="divVideo">
<video controls>
<source src="test1.mp4" type="video/mp4" />
</video>
</div>
This doesn't work:
这不起作用：
var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);
It changes the src if I inspect it using firebug, but does not actually change the video being played.
如果我使用 firebug 检查它，它会更改 src，但实际上不会更改正在播放的视频。
I read about .pause() and .load(), but I'm not sure how to use them.
我读过 .pause() 和 .load()，但我不确定如何使用它们。
回答by ?ime Vidas
Try $("#divVideo video")[0].load();after you changed the src attribute.
$("#divVideo video")[0].load();在更改 src 属性后尝试。
回答by smaj08r
I would rather make it like this
我宁愿让它像这样
<video id="v1" width="320" height="240" controls="controls">
</video>
and then use
然后使用
$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );
回答by vipero07
I've tried using the autoplay tag, and .load() .play() still need to be called at least in chrome (maybe its my settings).
我已经尝试使用自动播放标签，并且 .load() .play() 仍然需要至少在 chrome 中被调用（也许它是我的设置）。
the simplest cross browser way to do this with jquery using your example would be
使用您的示例使用 jquery 执行此操作的最简单的跨浏览器方法是
var $video = $('#divVideo video'),
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].play();
However the way I'd suggest you do it (for legibility and simplicity) is
然而，我建议你这样做（为了易读性和简单性）是
var video = $('#divVideo video')[0];
video.src = videoFile;
video.load();
video.play();
Further Reading http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript
进一步阅读 http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript
Additional info: .load() only works if there is an html source element inside the video element (i.e. <source src="demo.mp4" type="video/mp4" />)
附加信息：.load() 仅在视频元素中有 html 源元素时才有效（即<source src="demo.mp4" type="video/mp4" />）
The non jquery way would be:
非 jquery 的方式是：
HTML
HTML
<div id="divVideo">
<video id="videoID" controls>
<source src="test1.mp4" type="video/mp4" />
</video>
</div>
JS
JS
var video = document.getelementbyid('videoID');
video.src = videoFile;
video.load();
video.play();
回答by RodrigoKulb
JQUERY
查询
<script type="text/javascript">
$(document).ready(function() {
var videoID = 'videoclip';
var sourceID = 'mp4video';
var newmp4 = 'media/video2.mp4';
var newposter = 'media/video-poster2.jpg';
$('#videolink1').click(function(event) {
$('#'+videoID).get(0).pause();
$('#'+sourceID).attr('src', newmp4);
$('#'+videoID).get(0).load();
//$('#'+videoID).attr('poster', newposter); //Change video poster
$('#'+videoID).get(0).play();
});
});回答by sheelpriy
$(document).ready(function () {
setTimeout(function () {
$(".imgthumbnew").click(function () {
$("#divVideo video").attr({
"src": $(this).data("item"),
"autoplay": "autoplay",
})
})
}, 2000);
}
});
here ".imgthumbnew" is the class of images which are thumbs of videos, an extra attribute is given to them which have video url. u can change according to your convenient.
i would suggest you to give an ID to ur Video tag it would be easy to handle.
回答by Kokodoko
What worked for me was issuing the 'play' command after changing the source. Strangely you cannot use 'play()' through a jQuery instance so you just use getElementByID as follows:
对我有用的是在更改源后发出“播放”命令。奇怪的是，您不能通过 jQuery 实例使用“play()”，因此您只需按如下方式使用 getElementByID：
HTML
HTML
<video id="videoplayer" width="480" height="360"></video>
JAVASCRIPT
爪哇脚本
$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").play();
回答by Hasanavi
The easiest way is using autoplay.
最简单的方法是使用自动播放。
<video autoplay></video>
When you change src through javascript you don't need to mention load().
当您通过 javascript 更改 src 时，您无需提及 load()。
回答by PJunior
This is working on Flowplayer 6.0.2.
这是在Flowplayer 6.0.2上工作的。
<script>
flowplayer().load({
sources: [
{ type: "video/mp4", src: variable }
]
});
</script>
where variableis a javascript/jquery variable value, The video tag should be something this
其中变量是一个 javascript/jquery 变量值，视频标签应该是这样的
<div class="flowplayer">
<video>
<source type="video/mp4" src="" class="videomp4">
</video>
</div>
Hope it helps anyone.
希望它可以帮助任何人。
