2010-10-20 101 views
44

如何使用jQuery更改HTML5视频标签的src?如何使用jQuery更改视频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(),但我不知道如何使用它们。

回答

80

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

+0

谢谢。它工作正常。 :) – 2014-09-15 03:53:03

-1

最简单的方法是使用自动播放功能。

<video autoplay></video> 

当您通过javascript更改src时,您不需要提及load()。

11

我宁愿让它这样

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

</video> 

然后用

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

什么工作对我来说是发出改变源后“播放”命令。 奇怪的是,你不能用 '打()' 通过jQuery的实例,这样你只需要使用的getElementById如下:

HTML

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

JAVASCRIPT

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

我一直在使用自动播放卡试图,并且.load().play()仍然需要至少在chrome中调用(也许是我的设置)。

最简单的跨浏览器的方式使用您的例子是

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

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

附加信息:.load()只工作,如果有视频eleme内的HTML源元素nt(即<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(); 
+0

我收到一个JavaScript错误,说负载不支持。 IE 11. – Wade 2014-04-22 16:51:59

+0

我添加了一些关于您的错误韦德的额外信息。 – vipero07 2014-04-22 17:33:07

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

这是6.0.2的Flowplayer工作上

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

其中变量是一个JavaScript/jQuery的变量值, 的视频标签应该是这样的

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

希望它可以帮助任何人的东西。