點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

audio和video元素_html/css

來源：懂視網責編：小采時間：2020-11-27 16:16:21

audio和video元素_html/css

audio和video元素_html/css_WEB-ITnose:目錄 [1]HTML元素 audio video source [2]API 方法屬性事件 audio專有前面的話 HTML5新增了兩個與媒體相關的標簽，讓開發人員不必依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標簽是和，且不被IE8-瀏覽器支持以視頻文件舉例，

推薦度：

點擊下載本文 文檔為doc格式

導讀audio和video元素_html/css_WEB-ITnose:目錄 [1]HTML元素 audio video source [2]API 方法屬性事件 audio專有前面的話 HTML5新增了兩個與媒體相關的標簽，讓開發人員不必依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標簽是和，且不被IE8-瀏覽器支持以視頻文件舉例，

目錄 [1]HTML元素 audio video source [2]API 方法屬性事件 audio專有

前面的話

　　HTML5新增了兩個與媒體相關的標簽，讓開發人員不必依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標簽是和

　以視頻文件舉例，它包含了音頻軌道、視頻軌道和其他一些元數據(封面、標題、子標題、字幕等)

HTML元素

　　使用這兩個元素至少要在標簽中包含src屬性。位于開始和結束標簽之間的任何內容都將作為后備內容，在瀏覽器不支持這兩個媒體元素的情況下顯示

autoplay 自動播放controls 顯示控件loop 循環播放preload 音頻在頁面加載時進行加載，并預備播放(若使用autoplay,則忽略該屬性)src 要播放的音頻的URL

　　<演示框>點擊下列相應屬性值可進行演示

autoplay 自動播放controls 顯示控件height 　　　播放器高度width 　　　 播放器寬度loop 循環播放preload 視頻在頁面加載時進行加載，并預備播放(若使用autoplay,則忽略該屬性)preload="none"http://當頁面加載后不載入視頻preload="auto"http://當頁面加載后載入整個視頻preload="meta"http://當頁面加載后只載入元數據src 要播放的視頻的URLposter 　　　 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像

　　<演示框>點擊下列相應屬性值可進行演示

　　為

media 規定媒體資源的類型(沒有瀏覽器支持)src 　規定媒體文件的URLtype 規定媒體資源的MIME類型

　　常用類型

　　　　視頻 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音頻 [1]audio/ogg [2]audio/mpeg

　　使用和

 audio player not available.

　　因為并非所有瀏覽器都支持所有媒體格式，所以可以指定多個不同的媒體來源。為此，不用在標簽中指定src屬性，而是使用一個或多個元素

   audio player not available.

　　因為并非所有瀏覽器都支持和

API

　　HTML5 DOM為和

方法

(1)canPlayType()

　　檢測瀏覽器是否能播放指定的音頻或視頻類型，返回值為下列之一：

'probable':瀏覽器最可能支持該類型'maybe':瀏覽器也許支持該類型'':瀏覽器不支持該類型

//常用值video/oggvideo/mp4video/webmaudio/mpegaudio/oggaudio/mp4video/ogg;codecs="theora,vorbis"video/mp4;codecs="avc1.4D401E,mp4a.40.2"video/webm;codecs="vp8.0,vorbis"audio/ogg;codecs="vorbis"audio/mp4;codecs="mp4a.40.5"

(2)load()

　　重新加載音頻或視頻元素，用于在更改src來源或其他設置后對音頻或視頻元素進行更新

(3)play()

　　開始播放音頻或視頻

(4)pause()

　　暫停當前播放的音頻或視頻

　　<演示框>點擊下列相應屬性值可進行演示

屬性

　　[注意]所有屬性中，只有videoWidth和videoHeight是立即可用的，在音視頻的元數據加載后，其他屬性才可用

<只讀>

(1)buffered

buffered.length//獲取已緩沖范圍的數量buffered.start(index)//獲取某個已緩沖范圍的開始位置buffered.end(index)//獲取某個已緩沖范圍的結束位置buffered.end(0)//獲取當前已緩沖的秒數

(2)currentSrc

　　返回當前音頻或視頻的URL

(3)ended

　　返回音頻或視頻是否已結束

(4)duration

　　返回當前音頻或視頻的長度(以秒計)，如果未設置則返回NaN

(5)networkState

　　返回音頻或視頻當前網絡狀態

networkState:0(尚未初始化)networkState:1(已選取資源，但并未使用網絡)networkState:2(正在下載數據)networkState:3(未找到資源來源)

(6)paused

　　返回音頻或視頻是否已暫停

paused:true;(已暫停)paused:false;(未暫停)

(7)played

　　已播范圍是指音頻或視頻的時間范圍。如果用戶在音頻或視頻中跳躍，會獲得多個播放范圍

played.length(獲得音頻或視頻已播放范圍的數量)played.start(index)(獲得某個已播范圍的開始位置)played.end(index)(獲得某個已播范圍的結束位置)

　　[注意]首段已播范圍的下標是0

(8)readyState

　　返回音頻或視頻的當前就緒狀態

readyState:0(沒有關于音頻或視頻是否就緒的信息)readyState:1(關于音頻或視頻就緒的元數據)readyState:2(關于當前播放位置的數據是可用的，但沒有足夠的數據來播放下一幀)readyState:3(當前及至少下一幀的數據是可用的)readyState:4(可用數據足以開始播放)

(9)seekable

　　返回可尋址范圍，可尋址范圍是指用戶在視頻或音頻中可尋址(移動播放位置)的時間范圍。對于流視頻，通常可以尋址到視頻中的任何位置，即使其尚未完成緩沖

seekable.length(獲得音頻或視頻中可尋址范圍的數量)seekable.start(index)(獲得可尋址范圍的開始位置)seekable.end(index)(獲得可尋址范圍的結束位置)

(10)seeking

seeking:true(用戶正在尋址)seeking:false(用戶沒有在尋址)

<可讀寫>

(1)autoplay

autoplay:false(默認，不自動播放)autoplay:true(自動播放)

(2)controls

controls:false(默認，不顯示控件)controls:true(顯示控件)

(3)crossOrigin

　　設置或返回CORS設置

(4)currentTime

　　設置或返回音頻或視頻的當前位置(以秒計)

(5)defaultMuted(只有chrome支持)

defaultMuted:true(初始靜音)defaultMuted:false(默認，初始不靜音)

audio.defaultMuted = true;

(6)muted

muted:true(靜音)muted:false(不靜音)

(7)defaultPlaybackRate

defaultPlaybackRate:1(正常速度)defaultPlaybackRate:0.5(半速)defaultPlaybackRate:2(倍速)defaultPlaybackRate:-1(向后正常速度)defaultPlaybackRate:-0.5(向后半速)

var audio = document.getElementById('audio');setTimeout(function(){ audio.defaultPlaybackRate = 0.5; audio.load(); },1000);

(8)playbackRate

playbackRate:1(正常速度)playbackRate:0.5(半速)playbackRate:2(倍速)playbackRate:-1(向后正常速度)playbackRate:-0.5(向后半速)

(9)loop

loop:true(循環播放)loop:false(默認，不循環播放)

(10)preload

　　設置或返回是否在頁面加載后立即加載音頻或視頻

preload:auto;(一旦頁面加載，則開始加載音頻或視頻)preload:metadata;(當頁面加載后僅加載音頻或視頻的元數據)preload:none;(頁面加載后不加載音頻或視頻)

　　[注意]當設置autoplay時，該屬性無效

(11)src

　　設置或返回音頻或視頻的當前來源

(12)volume

　　設置或返回音頻或視頻的當前音量

volume(取得為0-1，0為靜音，1為最大，默認為1)

事件

　　當音頻或視頻正在加載過程中，會依次發生以下事件：

loadstart:提示瀏覽器開始尋找指定的音頻或視頻progress:提示瀏覽器正在下載指定的音頻或視頻durationchange:提示音頻或視頻的時長已改變loadedmetadata:提示音頻或視頻的元數據已加載loadeddata:提示音頻或視頻的當前幀已加載，但沒有足夠數據播放下一幀canplay:提示瀏覽器能夠開始播放指定的音頻或視頻canplaythrough:提示音頻或視頻能夠不停頓地一直播放progress:提示瀏覽器正在下載指定的音頻或視頻

　　影響音頻或視頻數據加載的事件有以下幾個：

abort:在音頻或視頻終止加載時觸發error:在音頻或視頻加載發生錯誤時觸發stalled:在瀏覽器嘗試獲取媒體數據，但數據不可用時觸發suspend:在音頻或視頻數據被阻止加載時觸發(可以是完成加載后觸發，或者因為被暫停)
empted:在發生故障并且文件突然不可用時觸發

　　音頻或視頻控制按鈕發生改變時觸發以下事件:

play:音頻或視頻文件已經就緒可以開始播放時觸發playing:音頻或視頻已開始播放時觸發ended:音頻或視頻文件播放完畢后觸發pause:音頻或視頻文件暫停時觸發ratechange:播放速度改變進觸發seeked:指示定位已結束時觸發seeking:正在進行指示定位時觸發timeupdate:播放位置改變時觸發[注意:播放和調整指示定位時都會觸發]volumechange:音量改變時觸發waiting:需要緩沖下一幀而停止時觸發