HTML5 Video與Audio 視頻與音頻

來源:互聯網
上載者:User

標籤:

---- 視頻Video對象

- 指定視頻播放地址

<video width="320" height="240" controls="controls">   <source src="movie.ogg" type="video/ogg" />   <source src="movie.mp4" type="video/mp4" />   你的瀏覽器不可使用視訊標籤</video>

- 內嵌元素,若不支援將會顯示那些指定的文字

- 視頻額外屬性

屬性 描述
------------------------------------------------------------
poster在視頻載入完成之前,代表視頻內容的圖片的URL地址
width,heigth設定顯示尺寸
videoWidth,videoHeight返回視頻的固有或自適應的寬度和高度,唯讀

---- 格式與瀏覽器匹配

Codec Firefox Opera Chrome Safari IE IOS* Android
--------------------------------------------------------------------
OGG3.5 10.50 3.0
MP4 3.0 3.0 2.0
WebM4.0 10.60 6.0 9**
Flash Plug-In Plug-In Plug-In Plug-In Plug-In 2.2

---- 音頻Audio對象

- 與視頻同享 HTMLMediaElement
- var audio = new Audio(src);

(注意:以前Audio和Vidio都通用)

- 常用的控制函數

函數動作
------------------------
load()載入音頻/視頻檔案,為播放做準備.通常情況下不必調用,除非是動態產生的元素,用來在播放前預先載入
play()載入並播放音頻/視頻檔案,除非音頻/視頻已經暫停在其他位置了,否則預設從開頭播放
pause()暫停處理播放狀態的音頻/視頻檔案
canPlayType(type) 測試void元素是否支援給定MIME類型的檔案

- 唯讀媒體屬性

屬性描述
-------------------------
duration整個媒體檔案的播放時間長度,以s為單位,如果無法擷取時,則返回NaN
paused如果媒體檔案當前被暫停,則返回true,如果還未開始播放,預設返回true
ended如果媒體檔案已經播放完畢,則返回true
startTime返回最早的播放起始時間,一般是0.0,除非是緩衝過的媒體檔案,並且一部分內容已經不在緩衝區
error在發生了錯誤的情況下返回的錯誤碼
currentSrc以字串形式返回當前現正播放或已載入的檔案,對應於瀏覽器在source元素中選擇的檔案

- 可指令碼控制的值

屬性描述
-------------------------
autoplay是否自動播放,或者查詢是否已設定為autoplay
loop是否迴圈播放
currentTime以s為單位返回從開始播放至現在所用的時間,在播放過程中,設定currentTime來定位媒體快進/快退
controls顯示或隱藏使用者控制介面,或者查詢使用者控制介面是否可見
volume在0.0到1.0之間設定音頻音量的相對值,或者查詢當前音量值
muted設定靜音,或檢測是否為靜音
autobuffer播放前是否進行緩衝載入,如果媒體已設定autoplay,則忽略此特性

HTML5 Video與Audio 視頻與音頻

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.