久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

## 多媒體（video和audio） **一、音頻（audio）和視頻（video）** 在HTML5中引入了`<audio>`和`<video>`元素，用來(lái)在HTML文檔中嵌入音頻和視頻： ``` <audio src="m.mp3"/> <video src="m.mp4" width=320 height=400 /> ``` 由于不同的瀏覽器對(duì)標(biāo)準(zhǔn)音頻和視頻的編解碼支持上并不一致，所以通常需要使用`<source>`元素來(lái)為指定不同格式的媒體源： ``` <audio id="music"> <source src="m.mp3" type="audio/mpeg"> <source src="m.ogg" type="audio/ogg;codec='vorbis'"> </audio> ``` `<source>`元素沒(méi)有任何內(nèi)容：沒(méi)有閉合的`</source>`標(biāo)簽，也需要使用“/>”來(lái)結(jié)束它們。 我們可以在`<audio>`和`</audio>`（或`<video>`和`</video>`）標(biāo)簽之間插入文本內(nèi)容，如果瀏覽器支持`<audio>`和`<video>`元素，將不會(huì)渲染文本內(nèi)容；而如果瀏覽器不支持時(shí)，則會(huì)將它們渲染出來(lái)。 ``` <audio id="music"> <source src="m.mp3" type="audio/mpeg"> <source src="m.ogg" type="audio/ogg;codec='vorbis'"> 您的瀏覽器不支持audio標(biāo)簽。 </audio> ``` **1.1 HTML中媒體的屬性** **（1）視頻（`<video>`）** ``` autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。 controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。 height pixels 設(shè)置視頻播放器的高度。 width pixels 設(shè)置視頻播放器的寬度。 loop loop 如果出現(xiàn)該屬性，則循環(huán)播放。 muted muted 如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。 poster URL 規(guī)定視頻正在下載時(shí)顯示的圖像，直到用戶點(diǎn)擊播放按鈕。 preload auto/metadata/none 如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。 src URL 要播放的視頻的 URL。 ``` **（2）音頻（`<audio>`）** ``` autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。 controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。 loop loop 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。 muted muted 如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。 preload auto/metadata/none 如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。 src URL 要播放的視頻的 URL。 ``` **1.2 用JavaScript操作音頻和視頻** audio可以通過(guò)new創(chuàng)建Audio對(duì)象 ``` var music = new Audio('m.mp3'); ``` 還可以通過(guò)標(biāo)簽獲取`<audio>`或`<video>`元素，即獲得HTMLVideoElement和HTMLAudioElement對(duì)象： ``` var music = document.getElementById('music'); ``` 檢測(cè)瀏覽器是否支持 ``` var hasAudio = !!(music.canPlayType); //通過(guò)!!運(yùn)算符將結(jié)果轉(zhuǎn)換成布爾值 ``` **（1）屬性** **只讀屬性：** ``` duration 整個(gè)媒體文件的播放時(shí)長(zhǎng)，以秒為單位。如果無(wú)法獲取時(shí)長(zhǎng)，則返回NaN paused 如果媒體文件當(dāng)前被暫停，則返回true。如果還未開(kāi)始播放，默認(rèn)返回true ended 如果媒體文件已經(jīng)播放完畢，則返回true startTime 返回最早的播放起始時(shí)間，一般是0.0，除非是緩沖過(guò)的媒體文件，并且一部分內(nèi)容已經(jīng)不在緩沖區(qū) error 在發(fā)生了錯(cuò)誤的情況下返回的錯(cuò)誤代碼 currentSrc 以字符串形式返回當(dāng)前正在播放或已加載的文件。對(duì)應(yīng)于瀏覽器在source元素中選擇的文件 seeking 如果播放器正在跳到一個(gè)新的播放點(diǎn)，那seeking的值為true。 initialTime 指定了媒體的開(kāi)始時(shí)間，單位為秒 ``` **可讀寫(xiě)屬性：** ``` autoplay 將媒體文件設(shè)置為創(chuàng)建后自動(dòng)播放，或者查詢是否已設(shè)置為autoplay loop 返回是否循環(huán)播放，或設(shè)置循環(huán)播放（或者不循環(huán)播放） currentTime 指定了播放器應(yīng)該跳過(guò)播放的時(shí)間（單位為秒）。在播放過(guò)程中，可設(shè)置currentTime屬性來(lái)進(jìn)行定點(diǎn)播放。 controls 顯示或隱藏用戶控制界面，或者查詢用戶控制界面當(dāng)前是否可見(jiàn) volume 在0.0到1.0之間設(shè)置音頻音量的相對(duì)值，或者查詢當(dāng)前音量相對(duì)值 muted 布爾值，設(shè)置靜音或者消除靜音，或者檢測(cè)當(dāng)前是否為靜音 autobuffer 通知播放器在媒體文件開(kāi)始播放前，是否驚醒緩沖加載。如果已設(shè)置為autoplay，則忽略此特性 playbackRate 用于指定媒體播放的速度。1.0表示正常速度，大于1則表示“快進(jìn)”，0~1之間表示“慢放”，負(fù)值表示回放。 ``` **三個(gè)特殊屬性：** ``` played 返回已經(jīng)播放的時(shí)間段 buffered 返回當(dāng)前已經(jīng)緩沖的時(shí)間段 seekable 返回當(dāng)前播放器需要跳到的時(shí)間段 played、buffered和seekable都是TimeRanges對(duì)象，每個(gè)對(duì)象都有一個(gè)length屬性以及start(index)和end(index)方法，前者表示當(dāng)前一個(gè)時(shí)間段，后者分別返回當(dāng)前時(shí)間段的起始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)（單位為秒）。 ``` 還有另外三個(gè)屬性： readyState、networkState和error，它們包含`<audio>`和`<video>`元素的一些狀態(tài)細(xì)節(jié)。每個(gè)屬性都是數(shù)字類型的，而且為每個(gè)有效值都定義了對(duì)應(yīng)的常量。 **readyStete屬性** `readyState`屬性指定當(dāng)前已經(jīng)加載了多少媒體內(nèi)容，只讀屬性 ``` HAVE_NOTHING（數(shù)字值為0）：沒(méi)有獲取到媒體的任何信息，當(dāng)前播放位置沒(méi)有可播放數(shù)據(jù)。 HAVE_METADATA（數(shù)字值為1）：已經(jīng)獲取到足夠的媒體數(shù)據(jù)，但是當(dāng)前播放位置沒(méi)有有效的媒體數(shù)據(jù)（也就是說(shuō)，獲取到的媒體數(shù)據(jù)無(wú)效，不能播放）。 HAVE_CURRENT_DATA（數(shù)字值為2）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，但沒(méi)有獲致到可以讓播放器前進(jìn)的數(shù)據(jù)。當(dāng)媒體為視頻時(shí)，意思是當(dāng)前帖的數(shù)據(jù)已獲取，但沒(méi)有獲取到下一幀的數(shù)據(jù)，或者當(dāng)前幀已經(jīng)是播放的最重一幀。 HAVE_FUTURE_DATA（數(shù)字值為3）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，而且也獲取到了可以讓播放器前進(jìn)的數(shù)據(jù)。當(dāng)媒體為視頻時(shí)，意思是當(dāng)前幀的數(shù)據(jù)已獲取，而且也獲取到了下刺目販數(shù)據(jù)，當(dāng)前幀是播放的最后一幀時(shí)，readyState屬性不可能為HAVE_FUTURE_DTAT。 HAVE_ENOUGH)DATA（數(shù)字值為4）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，同時(shí)也獲取到了可以讓播放器前進(jìn)的數(shù)據(jù)，而且瀏覽器確認(rèn)媒體以某一種速度進(jìn)行加載，可以保證有足夠的后續(xù)數(shù)據(jù)進(jìn)行播放。 ``` **networkState屬性** networkState屬性讀取當(dāng)前的網(wǎng)絡(luò)狀態(tài)，共有如下所示的4個(gè)可能值： - NETWORK_EMPTY（數(shù)字值為0）：元素牌初始狀態(tài)。 - NETWORK_IDLE（數(shù)字值為1）：瀏覽器已選擇好用什么編碼格式來(lái)播放媒體，但尚未建立網(wǎng)絡(luò)連接。 - NETWORK_LOADING（數(shù)字值為2）：媒體數(shù)據(jù)加載中。 - NETWORK_NO_SOURCE（數(shù)字值為3）：沒(méi)有支持的編碼格式，不執(zhí)行加載。 **error屬性** 當(dāng)在加載媒體或者播放媒體過(guò)程中發(fā)生錯(cuò)誤時(shí)，瀏覽器就會(huì)設(shè)置<audio>或<video>元素的error屬性。在沒(méi)有錯(cuò)誤發(fā)生時(shí)，error屬性值為null。反之，error的屬性是一個(gè)對(duì)象，包含了描述錯(cuò)誤的數(shù)值code屬性，error.code可能的值： - MEDIA_ERR_ABORTED(數(shù)字值為1）：媒體數(shù)據(jù)的下載過(guò)程由于用戶的操作原因而被中止。 - MEDIA_ERR_NETWORK(數(shù)字值為2）：確認(rèn)媒體資源可用，但是在下載時(shí)出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤，媒體數(shù)據(jù)下載過(guò)程被中止。 - MEDIA_ERR_DECODE(數(shù)字值為3)：確認(rèn)媒體資源可能，但是解碼時(shí)發(fā)生錯(cuò)誤。 - MEDIA_ERR_SRC_NOT_SUPPORTED（數(shù)字值為4）：媒體格式不被支持。 video的額外屬性： ``` poster 在視頻加載完成之前，代表視頻內(nèi)容的圖片的URL地址。該特性可讀可修改 width、height 讀取或設(shè)置顯示尺寸。如果大小不匹配視頻本身，會(huì)導(dǎo)致邊緣出現(xiàn)黑色條狀區(qū)域 videoWidth、videoHeight 返回視頻的固有或自使用寬度和高度。只讀 ``` **（2）方法** `canPlayType(type)`方法將媒體的MIME類型作為參數(shù)，用來(lái)測(cè)試瀏覽器是否支持指定的媒體類型。如果它不能播放該類型的媒體文件，將返回一個(gè)空的字符串；反之，它會(huì)返回一個(gè)字符串：“maybe”或“probably”。 ``` var a = new Audio(); if(a.canPlayType('audio/wav')){ a.src = 'm.wav'; a.play(); } ``` 其他方法： - play() 控制媒體開(kāi)始播放 - pause() 暫停媒體播放 - load() 重新加載src指定的資源 **（3）事件** audio元素和video元素加載音頻和視頻時(shí)，以下事件按次序發(fā)生。 ``` loadstart：開(kāi)始加載音頻和視頻。 durationchange：音頻和視頻的duration屬性（時(shí)長(zhǎng)）發(fā)生變化時(shí)觸發(fā)，即已經(jīng)知道媒體文件的長(zhǎng)度。如果沒(méi)有指定音頻和視頻文件，duration屬性等于NaN。如果播放流媒體文件，沒(méi)有明確的結(jié)束時(shí)間，duration屬性等于Inf（Infinity）。 loadedmetadata：媒體文件的元數(shù)據(jù)加載完畢時(shí)觸發(fā)，元數(shù)據(jù)包括duration（時(shí)長(zhǎng)）、dimensions（大小，視頻獨(dú)有）和文字軌。 loadeddata：媒體文件的第一幀加載完畢時(shí)觸發(fā)，此時(shí)整個(gè)文件還沒(méi)有加載完。 progress：瀏覽器正在下載媒體文件，周期性觸發(fā)。下載信息保存在元素的buffered屬性中。 canplay：瀏覽器準(zhǔn)備好播放，即使只有幾幀，readyState屬性變?yōu)镃AN_PLAY。 canplaythrough：瀏覽器認(rèn)為可以不緩沖（buffering）播放時(shí)觸發(fā)，即當(dāng)前下載速度保持不低于播放速度，readyState屬性變?yōu)镃AN_PLAY_THROUGH。 ``` 除了上面這些事件，audio元素和video元素還支持以下事件。 ``` abort 播放中斷 emptied 媒體文件加載后又被清空，比如加載后又調(diào)用load方法重新加載。 ended 播放結(jié)束 error 發(fā)生錯(cuò)誤。該元素的error屬性包含更多信息。 pause 播放暫停 play 暫停后重新開(kāi)始播放 playing 開(kāi)始播放，包括第一次播放、暫停后播放、結(jié)束后重新播放。 ratechange 播放速率改變 seeked 搜索操作結(jié)束 seeking 搜索操作開(kāi)始 stalled 瀏覽器開(kāi)始嘗試讀取媒體文件，但是沒(méi)有如預(yù)期那樣獲取數(shù)據(jù) suspend 加載文件停止，有可能是播放結(jié)束，也有可能是其他原因的暫停 timeupdate 網(wǎng)頁(yè)元素的currentTime屬性改變時(shí)觸發(fā)。 volumechange 音量改變時(shí)觸發(fā)（包括靜音）。 waiting 由于另一個(gè)操作（比如搜索）還沒(méi)有結(jié)束，導(dǎo)致當(dāng)前操作（比如播放）不得不等待。 ```