很久没有做前端界面了,这几天做了一个专题前端页,加起来共12个界面,调样式调得头大,特别是还需要适应不同的分辨率真是让人抓狂。当然少不了动态加载视频之类。还好制作前端使用的是JQ技术,小编就分享一下如何动态修改video视频的问题!

动态修改video视频的src不生效怎么办

修改动态视频,通常我们的做法是修改video的src地址,然后在实际中发现,地址是修改成功了,但是不播放,无效。浏览器没有去请求设置的视频源地址。经过一系列的搜索查询。发现使用 append 可以完成动态修改视频地址问题

代码如下:

<video id="guestVideo" class="videoPlayer" controls="" width="100%" height="auto" preload="meta" data-setup="{}" x5-playsinline="" webkit-playsinline="" playsinline="" x-webkit-airplay="allow"></video>

<script>
var videoSrc = 'http://www.kw360.net/test.mp4';
var v = $("#guestVideo");
v.empty();
var src = $("<source src="" + videoSrc + "" type="video/mp4">");
v.append(src);
v[0].load();
</script>

上面的代码分析,通过 empty() 把video里面的有可能已经加载的source删除,然后用append添加新的source,最后使用.load()来进行播放。