你如何使用jQuery更改视频src？

Question

你如何使用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,但实际上并不会更改正在播放的视频.

我读到了.pause()和.load(),但我不知道如何使用它们.

Answer 1

$("#divVideo video")[0].load();更改src属性后尝试.

Answer 2

我宁愿这样做

<video  id="v1" width="320" height="240" controls="controls">

</video>

然后使用

$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );

Answer 3

我尝试过使用autoplay标签,而.load().play()仍然需要至少在chrome中调用(可能是我的设置).

用你的例子用jquery做这个最简单的跨浏览器方式就是

var $video = $('#divVideo video'),
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].play();

然而,我建议你这样做的方式(易读性和简洁性)是

var video = $('#divVideo video')[0];
video.src = videoFile;
video.load();
video.play();

进一步阅读 http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

附加信息:.load()仅在视频元素中有html源元素时才有效(即<source src="demo.mp4" type="video/mp4" />)

非jquery的方式是:

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