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

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（），但我不确定如何使用它们。

7 个解决方案

#1

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

试试$（“＃divVideo video”）[0] .load（）;更改src属性后。

#2

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

#3

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

我尝试过使用autoplay标签，而.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源元素时才有效（即）

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

#4

     $(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.

#5

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:

对我有用的是在更改源之后发出'play'命令。奇怪的是你不能通过jQuery实例使用'play（）'，所以你只需使用getElementByID，如下所示：

HTML

HTML

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

JAVASCRIPT

JAVASCRIPT

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

#6

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（）。

#7

This is working on Flowplayer 6.0.2.

这适用于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

其中variable是一个javascript / jquery变量值，视频标签应该是这样的

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

Hope it helps anyone.

希望它能帮助任何人。