使用jquery动态修改video标签source的src不起作用问题解决方案
代码
//html代码
<audio controls="controls" style="margin-top: 10px;" id="audio_bill_music">
<source src="<?= $bill_info['bill_music']; ?>" id="source_bill_music" type="audio/mpeg">
<embed height="40" width="100" src="http://www.qipa250.com/qipa250.mp3" id="embed_bill_music"></embed>
</audio>
//jquery 代码
$('#source_bill_music').attr('src', bill_music);
$('#embed_bill_music').attr('src', bill_music);
通过 jQuery 确实是给 source 的 src 赋值成功，从调试来看，浏览器并没有去发起请求去获得相应的视频，可以推断出来的是，当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，
浏览器也不会再去获取地址。但是通过动态的插入 source 标签的方式，可以触发浏览器进行重排，从而去获取相应地址的文件进行播放。
解决方案load() 方法重新加载音频/视频元素
load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(www.qipa250.com)</title>
</head>
<body>
<video id="qipaVideo" controls autoplay>
<source id="mp4_src" src="mov_bbb.mp4" type="video/mp4">
<source id="ogg_src" src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
<p>点击按钮修改视频资源，并重新加载。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.getElementById("mp4_src").src = "movie.mp4";
document.getElementById("ogg_src").src = "movie.ogg";
document.getElementById("qipaVideo").load();
}
</script>
<p>视频由<a href="http://www.qipa250.com/" target="_blank">Big Buck Bunny</a>奇葩</p>
</body>
</html>
4567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
