Làm cách nào để bạn thay đổi src video bằng jQuery?

Làm cách nào để thay đổi src của thẻ video HTML5 bằng jQuery?

Tôi có HTML này:

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

Điều này không hoạt động:

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

Nó thay đổi src nếu tôi kiểm tra nó bằng firebug, nhưng không thực sự thay đổi video đang được phát.

Tôi đã đọc về .pause () và .load (), nhưng tôi không chắc cách sử dụng chúng.

Hãy thử $("#divVideo video")[0].load();sau khi bạn thay đổi thuộc tính src.

Tôi thà làm nó như thế này

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

</video>

và sau đó sử dụng

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

Tôi đã thử sử dụng thẻ tự động phát và .load () .play () ít nhất vẫn cần được gọi trong chrome (có thể là cài đặt của tôi).

cách đơn giản nhất để thực hiện việc này với jquery bằng cách sử dụng ví dụ của bạn sẽ là

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

Tuy nhiên, cách tôi khuyên bạn nên làm (để dễ đọc và đơn giản) là

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

Đọc thêm http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

Thông tin bổ sung: .load () chỉ hoạt động nếu có phần tử nguồn html bên trong phần tử video (tức là <source src="demo.mp4" type="video/mp4" /> )

Cách không phải jquery sẽ là:

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

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

Điều làm việc hiệu quả với tôi là đưa ra lệnh 'chơi' sau khi thay đổi nguồn. Kỳ lạ là bạn không thể sử dụng 'play ()' thông qua một phiên bản jQuery, vì vậy bạn chỉ cần sử dụng getElementByID như sau:

HTML

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

JAVASCRIPT

$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").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.

Cách dễ nhất là sử dụng tự động phát.

<video autoplay></video>

Khi bạn thay đổi src thông qua javascript, bạn không cần phải đề cập đến load ().

Điều này đang hoạt động trên Flowplayer 6.0.2 .

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

trong đó biến là một giá trị biến javascript / jquery, Thẻ video phải là cái gì đó

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

Hy vọng nó sẽ giúp bất cứ ai.