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