HTML5 切换播放的video，图片切换

最新推荐文章于 2024-11-10 14:47:52 发布

weixin_30580943

最新推荐文章于 2024-11-10 14:47:52 发布

阅读量831

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuyj-vv/p/9517712.html

本文介绍了在HTML5中如何实现图片与视频播放源的切换。对于图片切换，通过修改img标签的src属性即可轻松完成。而对于视频播放源的切换，尝试修改source标签的方法不可行，正确的做法是直接修改video标签的src属性来达到目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图片切换

//将img中src修改后图片就将修改
//H5
<img id="img" src="img/1.jpg" >
//JS
var img = document.getElementById("img");
img.setAttribute("src", "img/2.jpg");

2.video播放的视频仿照图片进行切换--失败

//1.仿照图片切换，修改后播放的视频没有改变
//H5
<video id="video" width="600" height="" controls="controls" >
<source id="videoPlaySrc" src="movie.mp4" type="video/mp4"></source>
</video>

//JS
document.getElementById("videoPlaySrc").setAttribute("src", "320x240.ogg");
document.getElementById("videoPlaySrc").setAttribute("type", "video/ogg");
document.getElementById("video").play();

3.video下一个成功

//H%
<video id="video" width="600" height="" controls="controls" >
				<source id="videoPlaySrc" src="movie.mp4" type="video/mp4"></source>
</video>

//JS 直接给video的src赋值，就可以改变要播放的视频
document.getElementById("video").src="320x240.ogg";

总结：

　　1.video播放的视频是它自己属性中的src，不是它的子元素中的第一个<source>中的内容。

　　2.document获取到标签后能直接修改标签的属性，并及时的反馈到显示的页面中。

转载于:https://www.cnblogs.com/liuyj-vv/p/9517712.html