最近处理动态视频问题让小编深深的怀疑自己的人生了!明明通过JQ修改动态视频地址成功了,但一运行又有问题,特别是小编还特意写了文章去说明这事,结果好像被打脸了。

js动态修改video视频source及定帧图

修改动态视频,通常我们的做法是修改video的src地址,然后在实际中发现,地址是修改成功了,但是不播放,无效。浏览器没有去请求设置的视频源地址。经过一系列的搜索查询。最终代码如下:

代码如下:

<video id="guestVideo" class="videoPlayer" poster="https://x0.ifengimg.com/ucms/2022_53/56A31F7A77E5937D711EDCE104CC2B4F50DC4FCD_size49_w715_h359.jpg" controls="" width="100%" height="auto" preload="meta" data-setup="{}" x5-playsinline="" webkit-playsinline="" playsinline="" x-webkit-airplay="allow">
<source id="guestVideoMp4" src="https://video19.ifeng.com/video09/2022/12/26/p7013082270714045310-102-182708.mp4?reqtype=tsl&vid=70147a53-fd36-42f6-ae1e-81d14c0bd516&uid=XBhosJ&from=v_Free&pver=vHTML5Player_v2.0.0&sver=&se=&cat=&ptype=&platform=pc&sourceType=h5&dt=1672055457581&gid=vJ1YoYVORYct&sign=f474fe619725ad5d1fd47f9bc25bf19a&tm=1672055457581" type='video/mp4' />
</video>


<script>
var videoSrc = 'http://www.kw360.net/test.mp4';
var video = document.getElementById('guestVideo');
var source = document.getElementById('guestVideoMp4');
video.pause();
source.setAttribute('src', videoSrc);
video.load();
video.play();
</script>

备注:poster 的图片地址是视频定帧图,通过 video.load() 来重新加载视频源,然后 video.play() 实现播放。这是检测有效的。