Question

Làm cách nào để thay đổi nguồn của video bằng JS?

<video id="myVideoTag" width="670" height="377" autoplay="true" controls="controls"> 
    <source src="http://www.test.com/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video> 

Answer 1

Chắc chắn, bạn chỉ có thể thiết lập các thuộc tính src trên các yếu tố source:

document.querySelector("#myVideoTag > source").src = "http://example.com/new_url.mp4" 

Hoặc sử dụng jQuery thay vì phương pháp DOM tiêu chuẩn:

$("#myVideoTag > source").attr("src", "http://example.com/new_url.mp4"​​​​)​ 

Answer 2

tôi đã chạy vào cùng vấn đề. Theo chủ đề này:

changing source on html5 video tag

nó không thể thay đổi src của thẻ nguồn. bạn sẽ phải sử dụng src của thẻ video.

Answer 3

Mặc dù Campbell đã cung cấp giải pháp đúng, giải pháp hoàn chỉnh hơn cho câu hỏi 'danh sách phát cụ thể' trong tầm tay (như đã nêu trong nhận xét) được cung cấp here. Giải pháp này có thể được áp dụng cho tất cả các định dạng video nếu được triển khai chính xác (tôi đã sử dụng modernizr để phát hiện nguồn nào sẽ phát cho một trình duyệt cụ thể, kết hợp với giải pháp ở trên).

Giải pháp này sẽ hoạt động (và đã được thử nghiệm) để thay đổi video trong thẻ video HTML5 trong tất cả các trình duyệt HTML5, bao gồm IE8.

Answer 4

tôi đã phải đối mặt với vấn đề này nhiều lần và dựa trên kinh nghiệm trước và đào Tôi có thể đề nghị các tùy chọn này:

• thay thế thẻ video hoàn toàn

có, chỉ cần tái chèn <video> yếu tố với các nguồn mới. Đó là cách tiếp cận đơn giản nhưng hiệu quả. Đừng quên khởi tạo lại trình nghe sự kiện. URL của video

---

• assign đểvideo.src

này tôi thấy rất nhiều trong những câu trả lời ở đây, trên stackoverflow, và cũng có trong các nguồn trên github.

var video = document.getElementById('#myVideo'); 
video.src = newSourceURL; 

Tính năng này hoạt động nhưng bạn không thể cung cấp tùy chọn trình duyệt để chọn.

---

• gọi.load()trên yếu tố video

theo documentation bạn có thể cập nhật src thuộc tính cho <video> 's <source> thẻ và sau đó gọi .load() để thay đổi có hiệu lực:

<video id="myVideo"> 
    <source src="video.mp4" type="video/mp4" /> 
    <source src="video.ogg" type="video/ogg" /> 
</video> 

<script> 
    var video = document.getElementById('myVideo'); 
    var sources = video.getElementsByTagName('source'); 
    sources[0].src = anotherMp4URL; 
    sources[1].src = anotherOggURL; 
    video.load(); 
</script> 

Tuy nhiên here người ta nói rằng có sự cố trong một số trình duyệt.

Tôi hy vọng sẽ hữu ích khi có tất cả điều này ở một nơi.

Answer 5

Kiểm tra điều này. JavaScript này thay đổi src của thẻ nguồn. https://jsfiddle.net/a94zcrtq/8/

<script> 
 
    function toggle() { 
 
      if ($(this).attr('data-click-state') == 1) { 
 
       $(this).attr('data-click-state', 0) 
 
       document.getElementById("source").src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"; 
 
       document.getElementById("videoPlayer").load(); 
 
      } else { 
 
       $(this).attr('data-click-state', 1) 
 
       document.getElementById("source").src = "http://techslides.com/demos/sample-videos/small.mp4"; 
 
       document.getElementById("videoPlayer").load(); 
 
      } 
 
     } 
 
</script>

Answer 6

này đang làm việc

<video id="videoplayer1" width="240" height="160" controls> 
    <source id="video_res_1" src="" type="video/ogg"> 
</video> 

và trong javascript

document.getElementById("video_res_1").src = "my video url.ogv"; 
document.getElementById("videoplayer1").load(); 

Điều quan trọng là chức năng .load() mà tải lại các máy nghe nhạc video .

Answer 7

tôi hy vọng nó sẽ làm việc và xin điều chỉnh tên thuộc tính và id theo nhu cầu của bạn

mã html dưới đây

<video controls style="max-width: 90%;" id="filePreview">       
    <source type="video/mp4" id="video_source"> 
</video> 

js mã bên dưới

$("#fileToUpload").change(function(e){ 
     var source = $('#video_source'); 
     source[0].src = URL.createObjectURL(this.files[0]); 
     source.parent()[0].load(); 
    });