HTML5中的音頻和視頻媒體播放元素小結(jié)

音頻和視頻的編碼/解碼器是一組算法,用來對一段特定的音頻或視頻流進行編碼和解碼,以便音頻和視頻能夠播放。原始的媒體文件體積非常大,假如不對其進行編碼,那么構(gòu)成一段視頻和音頻的數(shù)據(jù)可能會非常龐大,以至于在因特網(wǎng)上傳播需耗費無法忍受的時間。若沒有解碼器的話,接收方就不能把編碼過的數(shù)據(jù)重組為原始的媒體數(shù)據(jù)。編解碼器可以讀懂特定的容器格式,并且對其中的音頻軌道和視頻軌道解碼。
理解媒體元素
1、基本操作:聲明媒體元素
- <audio controls src="Adele-Set Fire To The Rain.mp3">
- 您所使用的瀏覽器不支持HTML5 audio
- </audio>
代碼中的controls 特性是告訴瀏覽器顯示通用的用戶控件,包括開始、停止、跳播以及音量控制。如果不指定controls屬性,用戶將無法播放頁面上的音頻。
2、使用source元素
最簡單的情況下,src屬性直接指向媒體文件就可以了,但是,萬一瀏覽器不支持相關(guān)容器或者編碼器呢?這就需要用到備用聲明了。備用聲明中可以包含多種來源,瀏覽器可以從這么多的來源中進行選擇:
- <audio controls>
- <source src="Adele-Set Fire To The Rain.mp3" >
- <source src="Adele-Set Fire To The Rain.ogg" >
- </audio>
對于來源,瀏覽器會按照聲明順序判斷,如果支持的不止一種,那么瀏覽器會選擇支持的第一個來源。
3、媒體的控制
在audio元素或video元素中通過設(shè)置特性autoplay,不需要任何用戶交互,音頻或視頻文件就會在加載完成后自動播放。
常用的控制函數(shù)
函數(shù) | 動作 |
---|---|
load() | 加載音頻/視頻文件,為播放做準備,通常情況下不必調(diào)用,除非是動態(tài)生成的元素。用來在播放前預(yù)加載。 |
play() | 加載(有必要的話)并播放音頻/視頻文件。除非音頻/視頻已經(jīng)暫停在其他位置了,否則默認從頭開始播放 |
pause() | 暫停處于播放狀態(tài)的音頻/視頻文件 |
canPlayType(type) | 測試video元素是否支持給定MIME類型的文件 |
只讀的媒體特性
只讀特性 | 值 |
---|---|
duration | 整個媒體文件的播放時長,以s為單位。如果無法獲取時長,則返回NaN。 |
paused | 如果媒體文件當前被暫停,則返回true。如果還未開始播放,則返回false。 |
ended | 如果媒體文件已經(jīng)播放完畢,則返回true |
startTime | 返回最早的播放起始時間,一般是0.0,除非是緩沖過的媒體文件,并且一部分內(nèi)容已經(jīng)不在緩沖區(qū) |
error | 在發(fā)生了錯誤的情況下返回的錯誤代碼 |
currentSrc | 以字符串形式返回當前正在播放或已加載的文件。對應(yīng)于瀏覽器在source元素中選擇的文件。 |
可腳本控制的特性值
特性 | 值 |
---|---|
autoplay | 將媒體文件設(shè)置為創(chuàng)建后自動播放,或者查詢是否已設(shè)置為autoplay |
loop | 如果媒體文件播放完畢后能重新播放則返回true,或者將媒體文件設(shè)置為循環(huán)播放(或者不循環(huán)播放) |
currentTime | 以s為單位返回從開始播放到現(xiàn)在所用的時間。在播放過程中,設(shè)置currentTime來進行搜索,并定位到媒體文件的特定位置 |
controls | 顯示或隱藏用戶控制界面,或者查詢用戶控制界面當前是否可見 |
volume | 在0.0到1.0之間設(shè)置音頻音量的相對值,或者查詢當前音量的相對值。 |
muted | 為音頻文件設(shè)置靜音或者消除靜音,或者漸層當前是否為靜音 |
autobuffer | 通知播放器在媒體文件開始播放前,是否進行緩沖加載。如果媒體文件已經(jīng)設(shè)置為autoplay,則忽略測特性。 |
3.1使用audio和video元素
HTML5 video元素同audio元素非常類似,只是比audio元素多了一些特性。
特性 | 值 |
---|---|
poster | 在視頻加載完成之前,代表視頻內(nèi)容的圖片的URL地址,可以想象一下“電影海報”。該特性不僅可讀,而且可以修改,以便更換圖片 |
width、height | 讀取或設(shè)置顯示尺寸。如果設(shè)置的寬度與視頻本身大小不匹配,可能導(dǎo)致居中顯示,上下或左右可能出現(xiàn)黑色條狀區(qū)域。 |
videoWidth、videoHeight | 返回視頻固有的或自適應(yīng)的寬度和高度。只讀video元素還有一個audio元素不支持的關(guān)鍵特性:可被HTML5 Canvas的函數(shù)調(diào)用。 |
提示:當canvas使用視頻作為繪制來源時,畫出來的只是當前播放的幀。
相關(guān)文章
使用HTML和JavaScript播放本地的媒體(視頻音頻)文件的方法
這篇文章主要介紹了使用HTML和JavaScript播放本地的媒體(視頻音頻)文件的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考2021-02-18