javascript - Wenn Sie den Wert von Video SRC dynamisch über JQuery festlegen, kann das Video nicht abgespielt werden?

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

Die Demo finden Sie hier: https://jsfiddle.net/r9u1cn7o/
Klicken Sie auf verschiedene Labels, um ein Popup-Fenster zum Abspielen des entsprechenden Videos zu öffnen. Ich habe src jedoch über jquery erfolgreich einen Wert zugewiesen, aber ich kann nicht. Sie wissen nicht, warum es nicht abgespielt werden kann?

Answer 1

通过 jQuery 确实是给 source 的 src 赋值成功，从调试来看，浏览器并没有去发起请求去获得相应的视频，而只是单纯的将 a 标签的 src 中的值赋值给 source 了。

但是如果这么做，浏览器就会去请求地址获得视频文件：

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

因此，可以推断出来的是，当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。但是通过动态的插入 source 标签的方式，可以触发浏览器进行重排，从而去获取相应地址的文件进行播放。

Answer 2

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

source 里的 src 只会在渲染的时候被 check 一次.
要动态调整 src , 你应该从 video 入手, 改成这样应该就没问题了
$("#video-box video").prop("src",src)

Answer 3

别用source标签，直接写到video标签里；另外用attr()吧。还有就是video标签的width和height别写到style里，拿出来~

Answer 4

jsfidle不能嵌入视频. 换到本地就好了

Answer 5

video标签支持的视频格式有（1）H.264编码的mp4文件（2）webm（3）ogg 其他后缀的文件因为专利等问题暂时不支持，可以考虑转码试试

Answer 6

加个play()事件就好了