1. 程式人生 > >HTML5 切換播放的video,圖片切換

HTML5 切換播放的video,圖片切換

-- brush true 失敗 idt video pla 賦值 set

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,圖片切換