視頻和音頻內容

時間  2019-11-17
標籤 視頻 音頻 內容 简体版
原文   原文鏈接

web 中的音頻和視頻

HTML5新增了兩個與媒體相關的標籤，讓開發人員沒必要依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標籤是<audio>和<video>，且不被IE8-瀏覽器支持javascript

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

使用這兩個元素至少要在標籤中包含src屬性。位於開始和結束標籤之間的任何內容都將做爲後備內容，在瀏覽器不支持這兩個媒體元素的狀況下顯示java

<video> 標籤

<video> 容許你簡單的嵌入一段視頻web

src同 <img> 標籤使用方式相同，src 屬性指向你想要嵌入網頁當中的視頻資源chrome

controls用戶必須可以控制視頻和音頻的回放功能。你可使用瀏覽器提供的控制接口，同時你也能夠在 JavaScript （JavaScript API）當中使用這些控制接口。瀏覽器

<video> 標籤內的段落這個叫作後備內容 — 當瀏覽器不支持 <video> 標籤的時候，它將會顯示出來，它使咱們可以對舊的瀏覽器作一些兼容處理。緩存

多格式支持

不一樣的瀏覽器對視頻格式的支持不一樣。網絡

像 MP三、MP四、WebM這些術語叫作容器格式。他們是用不一樣的方式來播放音頻或者視頻的 — 也就是說這些容器是用不一樣的音頻軌道、視頻軌道、元數據來呈現媒體文件的app

視頻和音頻都有不一樣的格式，以下:ide

  • WebM 容器一般包括了 Ogg Vorbis 音頻和 VP8/VP9 視頻。主要在 FireFox 和 Chrome 當中支持。
  • MP4 容器一般包括 AAC 以及 MP3 音頻和 H.264 視頻。主要在 Internet Explorer 和 Safari 當中支持。
  • 老式的 Ogg 容器每每支持 Ogg Vorbis  音頻和 Ogg Theora 視頻。主要在 Firefox 和 Chrome 當中支持，不過這個容器已經被更強大的 WebM 容器所取代。

音頻播放器將會直接播放音頻文件,，例如 MP3 和 Ogg 文件。這些不須要容器。

面對不一樣瀏覽器支持不一樣格式咱們該怎麼作呢？

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的瀏覽器不支持 HTML5 視頻。可點擊<a href="rabbit320.mp4">此連接</a>觀看</p>
</video>

　　將 src 屬性從 <video> 標籤中移除，轉而將它放在幾個單獨的標籤 <source> 當中。在這個例子當中，瀏覽器將會檢查 <source> 標籤，而且播放第一個與其自身 codec 相匹配的媒體。

每一個 <source> 標籤頁含有一個 type 屬性，這個屬性是可選的，它包含了視頻文件的 MIME types。瀏覽器會經過檢查這個屬性來迅速的跳過那些不支持的格式。

若是你沒有添加 type 屬性，瀏覽器會嘗試加載每個文件，直到找到一個能正確播放的格式，這樣會消耗掉大量的時間和資源。

其餘 <video> 特性

width 和 height你能夠用屬性控制視頻的尺寸，也能夠用 CSS 來控制視頻尺寸

autoplay這個屬性會使音頻和視頻內容當即播放，即便頁面的其餘部分尚未加載徹底。

loop這個屬性可讓音頻或者視頻文件循環播放。

muted這個屬性會致使媒體播放時，默認關閉聲音。

poster這個屬性指向了一個圖像的URL，這個圖像會在視頻播放前顯示。一般用於粗略的預覽或者廣告。

preload

這個屬性被用來緩衝較大的文件，有3個值可選：

  • "none" ：不緩衝
  • "auto" ：頁面加載後緩存媒體文件
  • "metadata" ：僅緩衝文件的元數據

<audio> 標籤

<audio> 標籤與 <video> 標籤的使用方式幾乎徹底相同，有一些細微的差異好比下面的邊框不一樣

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

　[注意]<audio>元素不支持播放wma格式的文件

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的瀏覽器不支持 HTML5 音頻，可點擊<a href="viper.mp3">此連接</a>收聽。</p>
</audio>

<source>

　　爲<video>和<audio>提供媒介資源

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

經常使用類型

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

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

使用<audio>和<video>至少要在標籤中包含src屬性。位於開始和結束標籤之間的任何內容都將做爲後備內容，在瀏覽器不支持這兩個媒體元素的狀況下顯示

<video src="#">
    video player not available.
</video>

<audio src="#">
    audio player not available.
</audio>

由於並不是全部瀏覽器都支持全部媒體格式，因此能夠指定多個不一樣的媒體來源。爲此，不用在標籤中指定src屬性，而是使用一個或多個<source>元素

<video>
    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
    <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">
    <source src="video.mp4">
    video player not available.
</video>

<audio>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mp3">
    audio player not available.
</audio>

　由於並不是全部瀏覽器都支持<audio>和<video>標籤，因此更好的解決辦法是有備選內容

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>

　　

顯示音軌文本

<track>

　　<track>元素被看成媒體元素—<audio>和<video>的子元素來使用。它容許指定計時字幕（或者基於事件的數據），例如自動處理字幕

　　track 給媒體元素添加的數據的類型在kind屬性中設置，屬性值能夠是 subtitles, captions, descriptions, chapters 或 metadata。該元素指向當用戶請求額外的數據時瀏覽器公開的包含定時文本的源文件。一個media元素的任意兩個track子元素不能有相同的 kind、srclang和 label屬性

【default】

　　default屬性規定該軌道是默認的，假如沒有選擇任何軌道

【kind】

　　kind屬性表示軌道屬於什麼文本類型

captions 　　　　該軌道定義將在播放器中顯示的簡短說明
chapters    　　該軌道定義章節，用於導航媒介資源
descriptions   該軌道定義描述，用於經過音頻描述媒介的內容，假如內容不可播放或不可見
metadata    　　該軌道定義腳本使用的內容
subtitles    　該軌道定義字幕，用於在視頻中顯示字幕

【label】

　　label屬性表示軌道的標籤或標題

【url】

　　URL屬性表示字幕文件的URL

【srclang】

　　srclang屬性表示軌道的語言，若 kind 屬性值是 "subtitles"，則該屬性必需的。中文爲"zh"，英文爲"en"

　　字幕文件書寫格式以下所示，注意，毫秒位的3個0不能省略

WEBVTT

1
00:00:01.000 --> 00:00:08.000
歡迎來到小火柴的我的網站

<video width="320" height="240" controls="controls">
  <source src="mov.mp4" type="video/mp4" />
  <track src="cn_track.vtt" srclang="zh" default kind="captions" label="歡迎你">
  <object data="mov.mp4" width="320" height="240">
    <embed src="mov.mp4" width="320" height="240" />
  </object>
</video>

顯示字幕

WebVTT 是一個格式，用來編寫文本文件，這個文本文件包含了衆多的字符串，這些字符串會帶有一些元數據，它們能夠用來描述這個字符串將會在視頻中顯示的時間，甚至能夠用來描述這些字符串的樣式以及定位信息。這些字符串叫作 cues ，你能夠根據不一樣的需求來顯示不一樣的樣式，最多見的以下：

subtitle
經過添加翻譯字幕，來幫助那些聽不懂外國語言的人們理解音頻當中的內容。
captions
同步翻譯對白，或是描述一些有重要信息的聲音，來幫助那些不能聽音頻的人們理解音頻中的內容。
timed descriptions
將文字轉換爲音頻，用於服務那些有視覺障礙的人 
WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

　讓其與 HTML 媒體一塊兒顯示

  1. 以 .vtt 後綴名保存文件。
  2. 用 <track> 標籤連接 .vtt 文件， <track> 標籤需放在 <audio> 或 <video> 標籤當中，同時須要放在全部 <source> 標籤以後。使用 kind 屬性來指明是哪種類型，如 subtitles 、 captions 、 descriptions。而後，使用 srclang 來告訴瀏覽器你是用什麼語言來編寫的 subtitles。

　

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

API

　　HTML5 DOM爲<audio>和<video>元素提供了方法、屬性和事件

方法

一、canPlayType()

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

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

//經常使用值
video/ogg
video/mp4
video/webm
audio/mpeg
audio/ogg
audio/mp4
video/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"

<audio id="audio" src="song.mp3"></audio>    
<script>
var audio = document.getElementById('audio');
//probably
console.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"'));
</script>

二、load()

　　從新加載音頻或視頻元素，用於在更改src來源或其餘設置後對音頻或視頻元素進行更新

<audio id="audio" src="song.mp3" autoplay controls></audio>    
<script>
    var audio = document.getElementById('audio');
    audio.src = 'myocean.mp3';
    audio.load();
</script>

三、play()

　　開始播放音頻或視頻

四、pause()

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

<button onclick = 'audio.play();'>播放</button>
<button onclick = 'audio.pause();'>暫停</button>
<audio id="audio" src="myocean.mp3" controls></audio>

屬性

　　[注意]全部屬性中，只有videoWidth和videoHeight是當即可用的，在音視頻的元數據加載後，其餘屬性纔可用

【只讀】

一、buffered

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

<button>獲取緩衝時間</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
    alert(audio.buffered.end(0));
}
</script>

二、currentSrc

　　返回當前音頻或視頻的URL

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
//http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3
setInterval(function(){
    console.log(audio.currentSrc);    
},1000); 
</script>

三、ended

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.ended);
}    
</script>

四、duration

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//NaN
console.log(audio.duration);
//317.022041
setTimeout(function(){
    console.log(audio.duration);
},1000);

五、networkState

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

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//3
console.log(audio.networkState)
//1
document.onclick = function(){
    console.log(audio.networkState);
}
</script>

六、paused

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

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
console.log(audio.paused)
document.onclick = function(){
    console.log(audio.paused);
}
</script>

七、played

　　已播範圍是指音頻或視頻的時間範圍。若是用戶在音頻或視頻中跳躍，會得到多個播放範圍

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

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.played.end(0));
}
</script>　

八、readyState

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

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//0
console.log(audio.readyState);
//4
document.onclick = function(){
    console.log(audio.readyState);
}
</script>

九、seekable

　　返回可尋址範圍，可尋址範圍是指用戶在視頻或音頻中可尋址(移動播放位置)的時間範圍。對於流視頻，一般能夠尋址到視頻中的任何位置，即便其還沒有完成緩衝

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.seekable.end(0));
}
</script>

十、seeking

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
audio.onseeking = function(){
    console.log(audio.seeking);    
}    
</script>

【可讀寫】

一、autoplay

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

二、controls

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

三、crossOrigin

　　設置或返回CORS設置

四、currentTime

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
document.onclick = function(){
    console.log(audio.currentTime);    
    audio.currentTime = 5;
    console.log(audio.currentTime);
}; 
</script>

五、defaultMuted(只有chrome支持)

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

audio.defaultMuted = true;

六、muted

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

<button onclick="audio.muted = !audio.muted">音量開關</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

七、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);

八、playbackRate

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var array = [-1,-0.5,0.5,1,2];
var i = 0;
var audio = document.getElementById('audio');
document.onclick = function(){
    audio.playbackRate = array[i];
    console.log(audio.playbackRate);
    i++;
    i=i%5;
}

九、loop

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

十、preload

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

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

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

十一、src

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
console.log(audio.src);
document.onclick = function(){
    console.log(audio.src);
    audio.src = 'http://7xpdkf.com1.z0.glb.clouddn.com/song.mp3';
    audio.load();
    console.log(audio.src);
}    
</script>

十二、volume

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

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

<button onclick = "if(audio.volume<=0.9)audio.volume+=0.1;">增大音量</button>
<button onclick = "if(audio.volume>=0.1)audio.volume-=0.1;">減少音量</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

事件

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

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>    
audio.onloadstart = function(){
    console.log('loadstart');
}
audio.ondurationchange = function(){
    console.log('durationchange');
}    
audio.onloadedmetadata = function(){
    console.log('loadedmetadata');
}    
audio.onloadeddata = function(){
    console.log('loadeddata');
}    
audio.onprogress = function(){
    console.log('progress');
}    
audio.oncanplay = function(){
    console.log('canplay');
}    
audio.oncanplaythrough = function(){
    console.log('canplaythrough');
}    
</script>

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

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

<video id="video" src="http://7xpdkf.com1.z0.glb.clouddn.com/movie.mp4" controls></video>
<script>
setTimeout(function(){
    video.src='';
},2000);    
video.onabort = function(){
    console.log('abort');
}
video.onerror = function(){
    console.log('error');
}    
video.onstalled = function(){
    console.log('stalled');
}    
video.onsuspend = function(){
    console.log('suspend');
}    
video.onemptied = function(){
    console.log('emptied');
}
</script>

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

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

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3" controls></audio>
<script>    
var i = 1;
document.onclick = function(){
    i+=0.1;
    audio.playbackRate = i;
}
audio.onended = function(){
    console.log('ended');
}
audio.onpause = function(){
    console.log('pause');
}    
audio.onplay = function(){
    console.log('play');
}    
audio.onplaying = function(){
    console.log('playing');
}    
audio.onratechange = function(){
    console.log('ratechange');
}    
audio.onseeked = function(){
    console.log('seeked');
}    
audio.onseeking = function(){
    console.log('seeking');
}    
audio.ontimeupdate = function(){
    console.log('timeupdate');
}    
audio.onvolumechange = function(){
    console.log('volumechange');
}    
audio.onwaiting = function(){
    console.log('waiting');
}    
</script>

　　

audio專有

　　<audio>元素在一個原生的javascript構造函數Audio，能夠在任什麼時候候播放音頻。Audio和Image很像，但Audio不用像Image那樣必須插入到文檔中，只要建立一個新實例，並傳入音頻源文件便可

var audio = new Audio('test.mp3');   

<script>
var audio = new Audio('http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3');
audio.oncanplaythrough = function(){
    audio.controls = true;
    document.body.appendChild(audio);
}
// 爲兼容IOS
audio.load()
</script>

特別注意的是，IOS不能直接使用oncanplaythrough事件，須要添加audio.load()方法，不然該事件不生效

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程