溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么理解HTML5中的音頻和視頻媒體播放元素，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
音頻和視頻的編碼/解碼器是一組算法，用來對一段特定的音頻或視頻流進行編碼和解碼，以便音頻和視頻能夠播放。原始的媒體文件體積非常大，假如不對其進行編碼，那么構成一段視頻和音頻的數據可能會非常龐大，以至于在因特網上傳播需耗費無法忍受的時間。若沒有解碼器的話，接收方就不能把編碼過的數據重組為原始的媒體數據。編解碼器可以讀懂特定的容器格式，并且對其中的音頻軌道和視頻軌道解碼。
理解媒體元素
1、基本操作：聲明媒體元素
XML/HTML Code復制內容到剪貼板
<audio controls src="Adele-Set Fire To The Rain.mp3">
您所使用的瀏覽器不支持HTML5 audio
</audio>
代碼中的controls 特性是告訴瀏覽器顯示通用的用戶控件，包括開始、停止、跳播以及音量控制。如果不指定controls屬性，用戶將無法播放頁面上的音頻。
2、使用source元素
最簡單的情況下，src屬性直接指向媒體文件就可以了，但是，萬一瀏覽器不支持相關容器或者編碼器呢？這就需要用到備用聲明了。備用聲明中可以包含多種來源，瀏覽器可以從這么多的來源中進行選擇：
XML/HTML Code復制內容到剪貼板
<audio controls>
<source src="Adele-Set Fire To The Rain.mp3" >
<source src="Adele-Set Fire To The Rain.ogg" >
</audio>
對于來源，瀏覽器會按照聲明順序判斷，如果支持的不止一種，那么瀏覽器會選擇支持的第一個來源。
3、媒體的控制
在audio元素或video元素中通過設置特性autoplay,不需要任何用戶交互，音頻或視頻文件就會在加載完成后自動播放。
常用的控制函數
| 函數 | 動作 |
|---|---|
| load() | 加載音頻/視頻文件，為播放做準備，通常情況下不必調用，除非是動態生成的元素。用來在播放前預加載。 |
| play() | 加載（有必要的話）并播放音頻/視頻文件。除非音頻/視頻已經暫停在其他位置了，否則默認從頭開始播放 |
| pause() | 暫停處于播放狀態的音頻/視頻文件 |
| canPlayType(type) | 測試video元素是否支持給定MIME類型的文件 |
只讀的媒體特性
| 只讀特性 | 值 |
|---|---|
| duration | 整個媒體文件的播放時長，以s為單位。如果無法獲取時長，則返回NaN。 |
| paused | 如果媒體文件當前被暫停，則返回true。如果還未開始播放，則返回false。 |
| ended | 如果媒體文件已經播放完畢，則返回true |
| startTime | 返回最早的播放起始時間，一般是0.0，除非是緩沖過的媒體文件，并且一部分內容已經不在緩沖區 |
| error | 在發生了錯誤的情況下返回的錯誤代碼 |
| currentSrc | 以字符串形式返回當前正在播放或已加載的文件。對應于瀏覽器在source元素中選擇的文件。 |
可腳本控制的特性值
| 特性 | 值 |
|---|---|
| autoplay | 將媒體文件設置為創建后自動播放，或者查詢是否已設置為autoplay |
| loop | 如果媒體文件播放完畢后能重新播放則返回true，或者將媒體文件設置為循環播放（或者不循環播放） |
| currentTime | 以s為單位返回從開始播放到現在所用的時間。在播放過程中，設置currentTime來進行搜索，并定位到媒體文件的特定位置 |
| controls | 顯示或隱藏用戶控制界面，或者查詢用戶控制界面當前是否可見 |
| volume | 在0.0到1.0之間設置音頻音量的相對值，或者查詢當前音量的相對值。 |
| muted | 為音頻文件設置靜音或者消除靜音，或者漸層當前是否為靜音 |
| autobuffer | 通知播放器在媒體文件開始播放前，是否進行緩沖加載。如果媒體文件已經設置為autoplay，則忽略測特性。 |
3.1使用audio和video元素
HTML5 video元素同audio元素非常類似，只是比audio元素多了一些特性。
| 特性 | 值 |
|---|---|
| poster | 在視頻加載完成之前，代表視頻內容的圖片的URL地址，可以想象一下“電影海報”。該特性不僅可讀，而且可以修改，以便更換圖片 |
| width、height | 讀取或設置顯示尺寸。如果設置的寬度與視頻本身大小不匹配，可能導致居中顯示，上下或左右可能出現黑色條狀區域。 |
| videoWidth、videoHeight | 返回視頻固有的或自適應的寬度和高度。只讀video元素還有一個audio元素不支持的關鍵特性：可被HTML5 Canvas的函數調用。 |
提示：當canvas使用視頻作為繪制來源時，畫出來的只是當前播放的幀。
以上就是怎么理解HTML5中的音頻和視頻媒體播放元素，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
