如何使用 jQuery 更改 video src？

如何使用 jQuery 更改 HTML5视频标记的 src？

我得到了这个 HTML:

<div id="divVideo">
<video controls>
<source src="test1.mp4" type="video/mp4" />
</video>
</div>

这样行不通:

var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);

如果我使用 firebug 检查它，它会改变 src，但实际上不会改变正在播放的视频。

我读到过. stop ()和. load () ，但我不确定如何使用它们。

135268 次浏览
小开
最佳答案

Try $("#divVideo video")[0].load(); after you changed the src attribute.

小开

The easiest way is using autoplay.

<video autoplay></video>

When you change src through javascript you don't need to mention load().

小开

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>' );
小开

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:

HTML

<video id="videoplayer" width="480" height="360"></video>

JAVASCRIPT

$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").play();
小开

I've tried using the autoplay tag, and .load() .play() still need to be called at least in chrome (maybe its my settings).

the simplest cross browser way to do this with jquery using your example would be

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

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" />)

The non jquery way would be:

HTML

<div id="divVideo">
<video id="videoID" controls>
<source src="test1.mp4" type="video/mp4" />
</video>
</div>

JS

var video = document.getElementById('videoID');
video.src = videoFile;
video.load();
video.play();
小开 
     $(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.
小开

This is working on Flowplayer 6.0.2.

<script>
flowplayer().load({
sources: [
{ type: "video/mp4",  src: variable }
]
});
</script>

where variable is a javascript/jquery variable value, The video tag should be something this

<div class="flowplayer">
<video>
<source type="video/mp4" src="" class="videomp4">
</video>
</div>

Hope it helps anyone.

小开

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();
});
});


提交答案