javascript - Menetapkan nilai video src secara dinamik melalui jquery tidak boleh memainkan video?

Question

<p id="video-box">
 <video style="object-fit: fill;width: 200px;height: 50px;" controls>
    <source src="">
  </video>
</p>
<a class="dj" href="javascript:;" src="http://www.w3school.com.cn/i/movie.mp4">点击</a> 
*{padding:0;margin:0;}
#video-box{display:none;}
$(".dj").on("click", function() {
   var src = $(this).data("src");
   $("#video-box source").prop("src",src)
   $("#video-box").show();
});

Demo ada di sini https://jsfiddle.net/r9u1cn7o/
Klik pada label yang berbeza untuk muncul kotak timbul untuk memainkan video yang sepadan Walau bagaimanapun, saya berjaya memberikan nilai kepada src melalui jquery, tetapi saya tidak. tidak tahu mengapa ia tidak boleh dimainkan?

Answer 1

Nilai src sumber berjaya diberikan melalui jQuery Dari sudut penyahpepijatan, penyemak imbas tidak memulakan permintaan untuk mendapatkan video yang sepadan, tetapi hanya memberikan nilai dalam src teg a kepada sumber.

Tetapi jika anda melakukan ini, penyemak imbas akan meminta alamat untuk mendapatkan fail video:

$(".dj").on("click", function() {
   var src = $(this).data("src"),
       sourceDom = $("<source src=\""+ src +"\">");
       
   $("#video-box video").append(sourceDom);
   $("#video-box").show();
   
   // 自动播放
   $("#video-box video")[0].play()
});

Oleh itu, boleh disimpulkan bahawa apabila terdapat teg sumber dalam video, penyemak imbas akan mendapatkan alamat secara automatik selepas memberikan walaupun alamat berubah, penyemak imbas tidak akan mendapatkan alamat itu lagi. Walau bagaimanapun, dengan memasukkan teg sumber secara dinamik, penyemak imbas boleh dicetuskan untuk mengalir semula, dengan itu mendapatkan fail di alamat yang sepadan untuk main semula.

Answer 2

<video>
    <source src="xxx.mp4"/>
    <source src="xxx.ogg"/>
</video>

Src dalam sumber hanya akan diperiksa sekali semasa pemaparan
Untuk melaraskan src secara dinamik, anda harus bermula dengan video Jika anda menukarnya kepada ini, ia sepatutnya baik. ).prop(" src",src)

Answer 3

Jangan gunakan teg sumber, tulis terus ke dalam teg video; Selain itu, jangan tulis lebar dan tinggi tag video ke dalam gaya, keluarkannya~attr()

Answer 4

jsfidle tidak boleh membenamkan video Hanya tukar kepada tempatan

Answer 5

Format video yang disokong oleh teg video termasuk (1) fail mp4 berkod H.264 (2) webm (3) ogg Fail dengan akhiran lain tidak disokong buat sementara waktu kerana masalah paten dan isu lain ia

Answer 6

Hanya tambahkan acara main()