javascript - Wenn Sie den Wert von Video SRC dynamisch über JQuery festlegen, kann das Video nicht abgespielt werden?
过去多啦不再A梦
过去多啦不再A梦 2017-05-16 13:43:02
0
6
2837
<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?

过去多啦不再A梦
过去多啦不再A梦

Antworte allen(6)
为情所困

通过 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 标签的方式,可以触发浏览器进行重排,从而去获取相应地址的文件进行播放。

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

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

为情所困

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

習慣沉默

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

曾经蜡笔没有小新

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

我想大声告诉你

加个play()事件就好了

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!