溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么理解HTML5中的音頻和視頻媒體播放元素

發(fā)布時(shí)間：2021-09-15 17:18:05 來源：億速云 閱讀：130 作者：柒染 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)怎么理解HTML5中的音頻和視頻媒體播放元素，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

音頻和視頻的編碼/解碼器是一組算法，用來對(duì)一段特定的音頻或視頻流進(jìn)行編碼和解碼，以便音頻和視頻能夠播放。原始的媒體文件體積非常大，假如不對(duì)其進(jìn)行編碼，那么構(gòu)成一段視頻和音頻的數(shù)據(jù)可能會(huì)非常龐大，以至于在因特網(wǎng)上傳播需耗費(fèi)無法忍受的時(shí)間。若沒有解碼器的話，接收方就不能把編碼過的數(shù)據(jù)重組為原始的媒體數(shù)據(jù)。編解碼器可以讀懂特定的容器格式，并且對(duì)其中的音頻軌道和視頻軌道解碼。
理解媒體元素
1、基本操作：聲明媒體元素

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <audio controls src="Adele-Set Fire To The Rain.mp3">  

  2. 您所使用的瀏覽器不支持HTML5 audio   

  3. </audio>  

代碼中的controls 特性是告訴瀏覽器顯示通用的用戶控件，包括開始、停止、跳播以及音量控制。如果不指定controls屬性，用戶將無法播放頁面上的音頻。
2、使用source元素
最簡單的情況下，src屬性直接指向媒體文件就可以了，但是，萬一瀏覽器不支持相關(guān)容器或者編碼器呢？這就需要用到備用聲明了。備用聲明中可以包含多種來源，瀏覽器可以從這么多的來源中進(jìn)行選擇：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <audio controls>  

  2. <source  src="Adele-Set Fire To The Rain.mp3" >  

  3. <source  src="Adele-Set Fire To The Rain.ogg" >  

  4. </audio>  

對(duì)于來源，瀏覽器會(huì)按照聲明順序判斷，如果支持的不止一種，那么瀏覽器會(huì)選擇支持的第一個(gè)來源。
3、媒體的控制
在audio元素或video元素中通過設(shè)置特性autoplay,不需要任何用戶交互，音頻或視頻文件就會(huì)在加載完成后自動(dòng)播放。
常用的控制函數(shù)

函數(shù)動(dòng)作
load()加載音頻/視頻文件，為播放做準(zhǔn)備，通常情況下不必調(diào)用，除非是動(dòng)態(tài)生成的元素。用來在播放前預(yù)加載。
play()加載（有必要的話）并播放音頻/視頻文件。除非音頻/視頻已經(jīng)暫停在其他位置了，否則默認(rèn)從頭開始播放
pause()暫停處于播放狀態(tài)的音頻/視頻文件
canPlayType(type)測(cè)試video元素是否支持給定MIME類型的文件


只讀的媒體特性

只讀特性值
duration整個(gè)媒體文件的播放時(shí)長，以s為單位。如果無法獲取時(shí)長，則返回NaN。
paused如果媒體文件當(dāng)前被暫停，則返回true。如果還未開始播放，則返回false。
ended如果媒體文件已經(jīng)播放完畢，則返回true
startTime返回最早的播放起始時(shí)間，一般是0.0，除非是緩沖過的媒體文件，并且一部分內(nèi)容已經(jīng)不在緩沖區(qū)
error在發(fā)生了錯(cuò)誤的情況下返回的錯(cuò)誤代碼
currentSrc以字符串形式返回當(dāng)前正在播放或已加載的文件。對(duì)應(yīng)于瀏覽器在source元素中選擇的文件。


可腳本控制的特性值

特性值
autoplay將媒體文件設(shè)置為創(chuàng)建后自動(dòng)播放，或者查詢是否已設(shè)置為autoplay
loop如果媒體文件播放完畢后能重新播放則返回true，或者將媒體文件設(shè)置為循環(huán)播放（或者不循環(huán)播放）
currentTime以s為單位返回從開始播放到現(xiàn)在所用的時(shí)間。在播放過程中，設(shè)置currentTime來進(jìn)行搜索，并定位到媒體文件的特定位置
controls顯示或隱藏用戶控制界面，或者查詢用戶控制界面當(dāng)前是否可見
volume在0.0到1.0之間設(shè)置音頻音量的相對(duì)值，或者查詢當(dāng)前音量的相對(duì)值。
muted為音頻文件設(shè)置靜音或者消除靜音，或者漸層當(dāng)前是否為靜音
autobuffer通知播放器在媒體文件開始播放前，是否進(jìn)行緩沖加載。如果媒體文件已經(jīng)設(shè)置為autoplay，則忽略測(cè)特性。


3.1使用audio和video元素
HTML5 video元素同audio元素非常類似，只是比audio元素多了一些特性。

特性值
poster在視頻加載完成之前，代表視頻內(nèi)容的圖片的URL地址，可以想象一下“電影海報(bào)”。該特性不僅可讀，而且可以修改，以便更換圖片
width、height讀取或設(shè)置顯示尺寸。如果設(shè)置的寬度與視頻本身大小不匹配，可能導(dǎo)致居中顯示，上下或左右可能出現(xiàn)黑色條狀區(qū)域。
videoWidth、videoHeight返回視頻固有的或自適應(yīng)的寬度和高度。只讀video元素還有一個(gè)audio元素不支持的關(guān)鍵特性：可被HTML5 Canvas的函數(shù)調(diào)用。


提示：當(dāng)canvas使用視頻作為繪制來源時(shí)，畫出來的只是當(dāng)前播放的幀。

以上就是怎么理解HTML5中的音頻和視頻媒體播放元素，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手