點擊下載
本文文檔

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

HTML5無插件多媒體Media-音頻audio與視頻video的詳細介紹

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

HTML5無插件多媒體Media-音頻audio與視頻video的詳細介紹

HTML5無插件多媒體Media-音頻audio與視頻video的詳細介紹:音頻與視頻現在已經變得越來越流行各個網站為了保證跨瀏覽器的兼容性仍然選擇使用flash（源碼截自優酷）多媒體標簽使用HTML5增加了audio與video兩個多媒體標簽兼容性還不錯，低版本IE不支持可以使我們不需要使用任何瀏覽器插件就能夠插入音頻與視頻控件

推薦度：

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

導讀HTML5無插件多媒體Media-音頻audio與視頻video的詳細介紹:音頻與視頻現在已經變得越來越流行各個網站為了保證跨瀏覽器的兼容性仍然選擇使用flash（源碼截自優酷）多媒體標簽使用HTML5增加了audio與video兩個多媒體標簽兼容性還不錯，低版本IE不支持可以使我們不需要使用任何瀏覽器插件就能夠插入音頻與視頻控件

音頻與視頻現在已經變得越來越流行
各個網站為了保證跨瀏覽器的兼容性
仍然選擇使用flash

（源碼截自優酷）

多媒體標簽

使用

HTML5增加了audio與video兩個多媒體標簽
兼容性還不錯，低版本IE不支持
可以使我們不需要使用任何瀏覽器插件就能夠插入音頻與視頻控件
而且非常的簡單

（源碼截自Bilibili）

元素用法如下:

<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
<video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

標簽中內容如果瀏覽器不支持該標簽就會顯示
當然使用這兩個元素的時候
最起碼要添加src屬性，屬性值就是資源的url

但是每個瀏覽器由于版權問題支持的媒體格式也不同
所以就可以使用下面的方式

<audio id="demoAudio">
 <source src="media/xi-Halcyon.mp3">
 <source src="media/xi-Halcyon.ogg"> ...
 不支持H5-audio
</audio>

<video id="demoVideo">
 <source src="media/Animation.mp4">
 <source src="media/Animation.webm"> ...
 不支持H5-video
</video>

這樣指定不同的資源格式
也保證了各個瀏覽器的兼容性

屬性

audio和video標簽除了src外
還有一些公有的屬性

屬性	描述
autoplay	設置該屬性后，音/視頻資源就緒后立即播放
controls	設置該屬性后，則顯示瀏覽器播放控制控件
loop	設置該屬性后，則音/視頻結束后重新循環開始播放
preload	設置該屬性后，則音/視頻在頁面加載時進行加載，并預備播放（使用autoplay會忽略該屬性）

前三個屬性屬性名與屬性值相同，直接添加屬性名即可
preload有如下屬性值

none 不加載數據

metedata 僅加載元數據（時長、比特率、幀大小等）

auto 瀏覽器加載它認為適量的媒體內容

比如想要在瀏覽器添加一段音樂
并且加載后立即播放，循環播放
使用瀏覽器的播放控件

<audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>

控件的樣式各個瀏覽器都不一樣
隨著瀏覽器版本的更新，可能還會更新樣式

video元素還有獨有的屬性poster
屬性值是圖片資源的url
用來設置視頻播放前的一張占位圖片

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>

點擊播放后，視頻正常播放

腳本化音視頻

元素

使用js獲取dom節點就很簡單了

var a = document.getElementById('demoAudio');var v = document.getElementById('demoVideo');

類似于image的Image構造函數
Audio也可以通過類似的方式創建（Video不可以）
區別在于Image創建的圖片是要插入文檔的
但是Audio不需要

var a = new Audio('song.mp3');

然后可以為它添加autoplay、loop等屬性
然后添加到頁面

接口

在獲取的DOM節點上可以使用瀏覽器提供的接口屬性和方法
常用的屬性、方法如下

currentSrc 媒體數據的URL地址

volume 播放音量

介于0~1（注意超范圍會報錯），默認1最大音量

muted 是否靜音

設置true進入靜音模式

playbackRate 媒體播放速度

默認1.0常速，>1快進，<1慢放（負值表回放但無瀏覽器實現此功能）

defaultPlaybackRate 媒體默認的播放速度

currentTime 當前播放時間（單位s）

duration 媒體時長（單位s）

play() 播放音/視頻

pause() 暫停音/視頻

load() 重新加載音/視頻（通常用于修改元素屬性后）

除此之外還有

played 已經播放的時間段

buffered 已經緩沖的時間段

seekable 用戶可以跳轉的時間段

它們都是TimeRanges對象
每個對象都有一個length屬性（表示當前時間段）
以及start()和end()方法（返回當前時間段的起始時間點和結束時間點，單位s）
start()和end()都有一個數字參數，表示第一個時間段
確定當前緩存內容百分比：

var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)

下面三個布爾屬性表示媒體播放器的狀態

paused 是否暫停

seeking 是否正調到一個新的播放點

ended 是否播放結束并停止

并不是所有瀏覽器都支持video和audio的所有編解碼器
canPlayType()方法就是用來鑒定時候支持某一格式的媒體資源
返回字符串maybe、probably或空字符串
如果只傳入MIME類型，則返回maybe
如果同時傳入MIME類型和編解碼器，則返回probably（可能性增加了）
只是因為媒體文件只不過是音/視頻的容器
真正決定文件能否播放的還得是編碼格式

console.log(a.canPlayType('audio/mp4')); 
//maybeconsole.log(a.canPlayType('audio/mp4;codecs="mp4a.40.2"')); 
//probably

下面的狀態位屬性也了解一下

readyState 就緒狀態

0 = HAVE_NOTHING - 沒有關于音/視頻是否就緒的信息

1 = HAVE_METADATA - 關于音頻/視頻就緒的元數據

2 = HAVE_CURRENT_DATA - 關于當前播放位置的數據是可用的，但沒有足夠的數據來播放下一幀/ms

3 = HAVE_FUTURE_DATA - 當前及至少下一幀的數據可用

4 = HAVE_ENOUGH_DATA - 可用數據足以開始播放

netWorkState 網絡狀態

0 = NETWORK_EMPTY - 音/視頻尚未初始化

1 = NETWORK_IDLE - 音/視頻是活動的且已選取資源，但并未使用網絡

2 = NETWORK_LOADING - 瀏覽器正在下載數據

3 = NETWORK_NO_SOURCE - 未找到音/視頻來源

error.code 錯誤狀態

1 = MEDIA_ERR_ABORTED - 取回過程被用戶中止

2 = MEDIA_ERR_NETWORK - 當下載時發生錯誤

3 = MEDIA_ERR_DECODE - 當解碼時發生錯誤

4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻

事件

除了接口屬性方法以外
還有必不可少的事件模型
如果我們不想使用瀏覽器的控件而是定義自己的播放控制組件
就要使用這套事件了

play 播放時觸發

pause 暫停時觸發

loadedmetadata 瀏覽器獲取完媒體元數據時觸發

loadeddata 瀏覽器加載完當前幀媒體數據時觸發

ended 播放結束后停止時觸發

初次之外還有很多事件
很多不常用
在w3c截了一張圖

通過接口與事件
也可以簡單的實現自己簡陋的音樂播放器

<button id="btn">播放</button><span id="cur">0s</span>/<span id="dur">0s</span><br>音量：<input type="range" id="vol">

var audio = new Audio('media/xi-Halcyon.mp3');
var btn = document.getElementById('btn');
var vol = document.getElementById('vol');
var cur = document.getElementById('cur');
var dur = document.getElementById('dur');var state = 'pause';

vol.value = 100;
audio.onloadeddata = function(){
 dur.textContent = Math.floor(audio.duration) + 's';
}

setInterval(function(){
 cur.textContent = Math.floor(audio.currentTime) + 's';
}, 200);

btn.onclick = function(){
 if(state === 'play'){
 state = 'pause';
 btn.textContent = '播放';
 audio.pause();
 }else{
 state = 'play';
 btn.textContent = '暫停';
 audio.play();
 }
}


vol.oninput = function(){
 audio.volume = vol.value/100;
}