Как изменить видео src с помощью jQuery?

Question

Как изменить src видеотега HTML5 с помощью jQuery?

Я получил этот 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, но на самом деле не изменить воспроизводимое видео.

Я читал о .pause() и .load(), но я не уверен, как их использовать.

Answer 1

Попробуйте $("#divVideo video")[0].load(); после того, как вы изменили атрибут src.

Answer 2

Самый простой способ - использовать автовоспроизведение.

<video autoplay></video> 

Когда вы меняете src через javascript, вам не нужно указывать load().

Answer 3

я предпочел бы сделать это, как этот

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

</video> 

, а затем использовать

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

Answer 4

То, что сработало для меня было, выдавшего «играть» команду после изменения источника. Как ни странно, вы не можете использовать 'играть()' с помощью экземпляра JQuery, так что вы просто использовать getElementByID следующим образом:

HTML

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

JAVASCRIPT

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

Answer 5

Я попытался с помощью автовоспроизведением тег , и .load() .play() еще нужно вызвать по крайней мере в хром (возможно, его мои настройки).

самый простой способ кросс-браузер, чтобы сделать это с помощью 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 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(); 

Answer 6

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

Answer 7

Это работает на Flowplayer 6.0.2.

<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> 

Надеется, что это помогает любому.