码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-22 17:04:14      阅读:1304      评论:0      收藏:0      [点我收藏+]

标签:VID   get   属性   htm   元素   type   赋值   视频   改变   

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获取到标签后能直接修改标签的属性,并及时的反馈到显示的页面中。

  

  

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

标签:VID   get   属性   htm   元素   type   赋值   视频   改变   

原文地址:https://www.cnblogs.com/liuyj-vv/p/9517712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!