HTML5視訊video開發demo例子

業餘草發表於2014-11-27
原文網址 : https://blog.csdn.net/xmtblog/article/details/41542261
HTMLIDE
HTML5的video可以使用DOM的方式進行控制。video元素同樣擁有方法、屬性和事件。
比如它擁有的方法用於播放、暫停以及載入等。其中的屬性（比如時長、音量等）可以被讀取或設定。
其中的 DOM 事件能夠通知您，比方說，video元素開始播放、已暫停，已停止，等等。
廢話少說了，看下面的例項吧。

為視訊建立簡單的播放/暫停以及調整尺寸控制元件：

<!DOCTYPE html> 
<html> 
<body> 
歡迎大家關注我的部落格！如有疑問,請加QQ群：135430763共同學習！
<div style="text-align:center;">
  <button onclick="playPause()">播放/暫停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />
   你的瀏覽器不支援html5的video標籤
  </video>
</div>
<script type="text/javascript">
	var myVideo=document.getElementById("video1");
	function playPause(){ 
		if (myVideo.paused) 
			myVideo.play(); 
		else 
			myVideo.pause(); 
	} 
	function makeBig(){ 
		myVideo.width=560; 
	} 
	function makeSmall(){ 
		myVideo.width=320; 
	} 
	function makeNormal(){ 
		myVideo.width=420; 
	} 
</script> 
</body> 
</html>
看看執行效果圖：

歡迎大家關注我的部落格！如有疑問,請加QQ群：135430763共同學習！

相關文章