html5學習(一)video欄位

西北野狼發表於2013-11-18
HTMLIDE

html5對視訊的支援：

html5通過<video></video>欄位實現web頁面上視訊的播放功能。

目前各大瀏覽器對<video>欄位的支援：

當前，video 元素支援三種視訊格式：

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案

MPEG4 = 帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案

WebM = 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案

簡單的html顯示視訊的例子

<!DOCTYPE HTML>
<html>
<body>

<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

</body>
</html>

src:指定視訊資源的位置（包括相對地址以及絕對地址）。

control 屬性供新增播放、暫停和音量控制元件。

此處注意視訊格式

 

<video> 標籤的屬性

 

屬性 值 描述
autoplay autoplay 如果出現該屬性，則視訊在就緒後馬上播放。
controls controls 如果出現該屬性，則向使用者顯示控制元件，比如播放按鈕。
height pixels 設定視訊播放器的高度。
loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
preload preload

如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。

如果使用 “autoplay”，則忽略該屬性。
src url 要播放的視訊的 URL。
width pixels 設定視訊播放器的寬度。

 

<!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=420; 
} 

function makeNormal()
{ 
myVideo.width=520; 
} 
</script> 

</body> 
</html>
方法 屬性 事件
play() currentSrc play
pause() currentTime pause

通過mvideo的play或者pause判斷視訊是否在播放或者暫停。

 


相關文章