點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

audio和video元素_html/css

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：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新增了兩個(gè)與媒體相關(guān)的標(biāo)簽，讓開發(fā)人員不必依賴任何插件就能在網(wǎng)頁(yè)中嵌入跨瀏覽器的音頻和視頻內(nèi)容，這兩個(gè)標(biāo)簽是和，且不被IE8-瀏覽器支持以視頻文件舉例，

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

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

前面的話

　　HTML5新增了兩個(gè)與媒體相關(guān)的標(biāo)簽，讓開發(fā)人員不必依賴任何插件就能在網(wǎng)頁(yè)中嵌入跨瀏覽器的音頻和視頻內(nèi)容，這兩個(gè)標(biāo)簽是和

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

HTML元素

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

autoplay 自動(dòng)播放controls 顯示控件loop 循環(huán)播放preload 音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放(若使用autoplay,則忽略該屬性)src 要播放的音頻的URL

　　<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示

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

　　<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示

　　為

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

　　常用類型

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

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

　　使用和

 audio player not available.

　　因?yàn)椴⒎撬袨g覽器都支持所有媒體格式，所以可以指定多個(gè)不同的媒體來(lái)源。為此，不用在標(biāo)簽中指定src屬性，而是使用一個(gè)或多個(gè)元素

   audio player not available.

　　因?yàn)椴⒎撬袨g覽器都支持和

API

　　HTML5 DOM為和

方法

(1)canPlayType()

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

'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來(lái)源或其他設(shè)置后對(duì)音頻或視頻元素進(jìn)行更新

(3)play()

　　開始播放音頻或視頻

(4)pause()

　　暫停當(dāng)前播放的音頻或視頻

　　<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示

屬性

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

<只讀>

(1)buffered

buffered.length//獲取已緩沖范圍的數(shù)量buffered.start(index)//獲取某個(gè)已緩沖范圍的開始位置buffered.end(index)//獲取某個(gè)已緩沖范圍的結(jié)束位置buffered.end(0)//獲取當(dāng)前已緩沖的秒數(shù)

(2)currentSrc

　　返回當(dāng)前音頻或視頻的URL

(3)ended

　　返回音頻或視頻是否已結(jié)束

(4)duration

　　返回當(dāng)前音頻或視頻的長(zhǎng)度(以秒計(jì))，如果未設(shè)置則返回NaN

(5)networkState

　　返回音頻或視頻當(dāng)前網(wǎng)絡(luò)狀態(tài)

networkState:0(尚未初始化)networkState:1(已選取資源，但并未使用網(wǎng)絡(luò))networkState:2(正在下載數(shù)據(jù))networkState:3(未找到資源來(lái)源)

(6)paused

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

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

(7)played

　　已播范圍是指音頻或視頻的時(shí)間范圍。如果用戶在音頻或視頻中跳躍，會(huì)獲得多個(gè)播放范圍

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

　　[注意]首段已播范圍的下標(biāo)是0

(8)readyState

　　返回音頻或視頻的當(dāng)前就緒狀態(tài)

readyState:0(沒(méi)有關(guān)于音頻或視頻是否就緒的信息)readyState:1(關(guān)于音頻或視頻就緒的元數(shù)據(jù))readyState:2(關(guān)于當(dāng)前播放位置的數(shù)據(jù)是可用的，但沒(méi)有足夠的數(shù)據(jù)來(lái)播放下一幀)readyState:3(當(dāng)前及至少下一幀的數(shù)據(jù)是可用的)readyState:4(可用數(shù)據(jù)足以開始播放)

(9)seekable

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

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

(10)seeking

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

<可讀寫>

(1)autoplay

autoplay:false(默認(rèn)，不自動(dòng)播放)autoplay:true(自動(dòng)播放)

(2)controls

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

(3)crossOrigin

　　設(shè)置或返回CORS設(shè)置

(4)currentTime

　　設(shè)置或返回音頻或視頻的當(dāng)前位置(以秒計(jì))

(5)defaultMuted(只有chrome支持)

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

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(循環(huán)播放)loop:false(默認(rèn)，不循環(huán)播放)

(10)preload

　　設(shè)置或返回是否在頁(yè)面加載后立即加載音頻或視頻

preload:auto;(一旦頁(yè)面加載，則開始加載音頻或視頻)preload:metadata;(當(dāng)頁(yè)面加載后僅加載音頻或視頻的元數(shù)據(jù))preload:none;(頁(yè)面加載后不加載音頻或視頻)

　　[注意]當(dāng)設(shè)置autoplay時(shí)，該屬性無(wú)效

(11)src

　　設(shè)置或返回音頻或視頻的當(dāng)前來(lái)源

(12)volume

　　設(shè)置或返回音頻或視頻的當(dāng)前音量

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

事件

　　當(dāng)音頻或視頻正在加載過(guò)程中，會(huì)依次發(fā)生以下事件：

loadstart:提示瀏覽器開始尋找指定的音頻或視頻progress:提示瀏覽器正在下載指定的音頻或視頻durationchange:提示音頻或視頻的時(shí)長(zhǎng)已改變loadedmetadata:提示音頻或視頻的元數(shù)據(jù)已加載loadeddata:提示音頻或視頻的當(dāng)前幀已加載，但沒(méi)有足夠數(shù)據(jù)播放下一幀canplay:提示瀏覽器能夠開始播放指定的音頻或視頻canplaythrough:提示音頻或視頻能夠不停頓地一直播放progress:提示瀏覽器正在下載指定的音頻或視頻

　　影響音頻或視頻數(shù)據(jù)加載的事件有以下幾個(gè)：

abort:在音頻或視頻終止加載時(shí)觸發(fā)error:在音頻或視頻加載發(fā)生錯(cuò)誤時(shí)觸發(fā)stalled:在瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時(shí)觸發(fā)suspend:在音頻或視頻數(shù)據(jù)被阻止加載時(shí)觸發(fā)(可以是完成加載后觸發(fā)，或者因?yàn)楸粫和?
empted:在發(fā)生故障并且文件突然不可用時(shí)觸發(fā)

　　音頻或視頻控制按鈕發(fā)生改變時(shí)觸發(fā)以下事件:

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