HTML5的新增 video+DOM(實現播放、暫停、調整尺寸大小)(筆記)


HTML<video>元素也是擁有方法、屬性和事件。

其中的方法就是用於播放、暫停以及加載等。其中的屬性(如:時長、音量等)可以被讀取或設置。其中的DOM事件能夠通知您。比如說,<video>元素開始播放、已暫停、已停止、等等。

案例一:使用video和DOM元素,實現簡單的播放、暫停、調整尺寸控件:

<!DOCTYPE html> 
<html> 
<body> 

<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="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support 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>

案例截圖:

小尺寸播放:

中尺寸播放:

大尺寸播放:

以上調用了兩個方法:paly()和pause()。它同時使用兩個屬性:paused和width.

 以下是W3C的屬性列表

下面列出了大多數瀏覽器支持的視頻方法、屬性和事件:

注釋:在所有屬性中,只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后,其他屬性才可用。

視頻、標簽來源W3C


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM