Video&Audio（進階篇）

在HTML5中可以很輕松的處理視訊與音頻，在HTML5中不僅可簡單的播放視訊/音頻，而且可友善的進行變速播放，方向播放，等等。尤其是可将Canvas與視訊進行結合，大大擴充顯示效果。在HTML5中進行音頻與視訊的處理時，幾乎可以使用相同的屬性與方法。

在沒有HTML5以前，在頁面中播放視訊時必須通過Flash插件。HTML4中隻能通過插件才能處理視訊與音頻。對于iPhone、Android等移動裝置來說，并不支援Flash，通過Flash進行播放的視訊頁面将不能顯示。自從移動裝置的浏覽器中支援HTML5的視訊以及音頻處理功能後，沒有Flash也能夠播放視訊/音頻。

舉個栗子：

可以通過樣式單自由的指定顯示位置、視訊螢幕尺寸大小等。另外，可以在同一頁面内可以顯示多個視訊，而且還可以将多個視訊重疊顯示。還可以上重疊字元串以及圖像。這種重疊方式，可以輕松的實作與字幕的重疊顯示。以前要追加字幕必需剪輯視訊，現在隻要編輯HTML文檔就可以了。而且在搜尋引擎中也能搜尋到字幕，将其翻譯一下就可以實作多語言版本。

講解：

基本語句:<video src="sample.mov"></video>

但是，在Firefox及Opera中不支援H.264編解碼器,使用H.264編解碼器的視訊将不能顯示。HTML5是通過在<video>中追加<source>子元素的方式解決這個問題。浏覽器會周遊<video>中追加<source>子元素，直至尋找到可播放的視訊檔案為止。

<video>中定義了各種屬性。

<video controls>
    <source src="sample.mov"></source>
    <source src="sample.ogv"></source>
    <p>浏覽器不支援<video>視訊功能</p>
</video>

<video>标簽定義的屬性

屬性	說明
src	視訊資料的URL
poster	視訊的縮略圖
preload	自動緩沖（Firefox中為autobuffer）
autoplay	自動播放
loop	循環播放
controls	顯示控制器
width	寬度
height	高度

<audio>與<video>一樣，也定義了不少屬性，但相對<canvas>标簽來說，<audio>屬性數量稍少。

<audio>标簽中定義的屬性

屬性	說明
src	視訊資料的URL
preload	自動緩沖（Firefox中為autobuffer）
autoplay	自動播放
loop	循環播放
controls	顯示控制器

Video和Audio的方法與屬性：

在HTML5中，視訊與音頻同屬于媒體處理範疇。是以，其可以使用的屬性與方法是共同的。首先，就方法而言，video和audio都有導入、播放、暫停、檢查是否可播放等方法。主要方法以及屬性：

Video和Audio的主要方法

方法	說明
play()	播放處理
pause()	暫停處理
load()	導入視訊/音頻資料
canPlayType()	判斷參數中指定的MIME類型的媒體檔案是否可播放。傳回空字元則不可播放。傳回maybe則可播放

Video和Audio的主要屬性

屬性	說明
currentTime	目前的播放時間
duration	視訊/音頻的時長
paused	是否暫停
ended	是否播放到最後，播放到最後時值為true
playbackBate	播放速度。2時則表示2倍速。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>快進/從頭開始/播放的最後換歌/播放</title>
<style type="text/css">
	.btn{
		border: 1px solid #35210D;
		padding: 10px;
		background-color: #B87412;
		color: white;
		font-size: 16px;
	}
</style>
</head>

<body>
<div>
	<audio id="myAudio" src="../../source/花雨溪-追光者.mp3" width="1200" height="24"></audio>
</div>
<div>
	<button class="btn" onclick="audioRetreat()">&lt;&lt;</button>
	<button class="btn" id="change" onclick="audioPlay()">|&gt;</button>
	<button class="btn" onclick="audioSppedFF()">&gt;&gt;</button>
	<button class="btn" onclick="audioPlayFirst()">重新播放</button>
	<button class="btn" id="speed" onclick="audioSedPlay()">1.0×</button>
</div>
<script type="text/javascript">
	var myAudio=document.getElementById("myAudio");
	var isPaly=false;
	//播放
	function audioPlay(){
		timer=setInterval(audioEnded,1000);
		if(isPaly){
			myAudio.pause();
			isPaly=false;
			document.getElementById("change").innerHTML="|>";
		}else{
			myAudio.play();
			isPaly=true;
			document.getElementById("change").innerHTML="||";
		}
	}
	//從頭開始播放
	function audioPlayFirst(){
		timer=setInterval(audioEnded,1000);
		document.getElementById("change").innerHTML="||";
		myAudio.currentTime=0;
		myAudio.play();
	}
	//快進
	function audioSppedFF(){
		myAudio.currentTime+=5;
		if(myAudio.ended){
			audioPlayFirst();
		}else{
			myAudio.play();
		}
	}
	//後退
	function audioRetreat(){
		if(myAudio.currentTime>=5){
			myAudio.currentTime-=5;
			myAudio.play();
		}else{
			audioPlayFirst();
		}
	}
	//2倍速
	function audioSedPlay(){
		if(myAudio.playbackRate==1){
			myAudio.playbackRate=2;
			document.getElementById("speed").innerHTML="2.0×";
		}else{
			myAudio.playbackRate=1;
			document.getElementById("speed").innerHTML="1.0×";
		}
	}
	//播放結束
	function audioEnded(){
		if(myAudio.ended){
			myAudio.pause();
			document.getElementById("change").innerHTML="|>";
			clearInterval(timer);
		}
	}
	window.onload=function(){
		timer=setInterval(audioEnded,1000);
	}
</script>
</body>
</html>

Video&Audio（進階篇）

事件以及事件發生順序：

時間概念：

事件清單（部分）

事件	說明
loadstart	資料導入開始
progress	進行中
suspend	發生延遲
abort	資料傳送中斷
error	發生錯誤
emptied	資料為空
stalled	停止中（網絡停止）
play	播放開始
pause	暫停
load	資料全部完成導入
loadedmetadata	meta資料完成導入
loadeddata	實體資料完成導入
waiting	待機中
playing	播放中
canplay	變成可播放狀态時（但可能在播放途中中斷）
canplaythrough	變成可一直播放到最後的狀态（預測而非保證）
seeking	搜尋中
seeked	搜尋結束
timeupdata	搜尋結束
ended	播放時間被更新
ratechange	播放速率發生變化
durationchange	播放時長發生變化
volumechange	音量發生變化

下面介紹在各浏覽器中都可以使用的主要事件：

canplay 變成可播放狀态時

canplay事件在視訊/音頻資料被下載下傳一定量後面而達成可以播放的狀态時發生。此事件在本地以及伺服器中都可以響應。如果是自定義播放按鈕，可捕捉此事件後再調用播放方法。

play、playing

play事件在視訊/音頻将開始播放時發生，而playing事件在視訊/音頻已開始播放時發生。而播放中觸發的事件并非playing。

timeupdate

timeupdate事件在視訊/音頻播放後，播放時間更新時發生。timeuoadate事件的發生時随浏覽器的不同而有所差異。在Firefox中，基本上是随着幀的變化而發生。而在Safari及Opera浏覽器中1秒中會發生多次。當将視訊傳送到Canvas中進行實時處理時，timeupdate事件并不實用。此時使用setTimeout()或setInterval()，定時向Canvas傳送視訊的方式更好。特别是在Firefox中因為随着幀的變化會不斷觸發timeupdate事件，播放時消耗的記憶體資源會更多。

ended

ended事件在視訊播放結束時觸發。另外如果在<video>中指定loop屬性，則ended事件不會發生。

事件的發生順序：

不同的浏覽器中支援的事件不僅不同，而且發生順序也有差異。将來随着浏覽器版本的更新有可能發生變化。

視訊導入時發生的事件及順序（本地）

Firefox 3.6	Safari 4	Safari 5	Chrome 4
progress	loadstart	loadstart	loadstart
canplay	durationchange	durationchange	durationchange
canplaythrough	loadedmetadata	loadedmetadata	loadedmetadata
suspend	loadeddata	loadeddata	loadeddata
canplay	progress	canplay
canplaythrough	canplay	canplaythrough
load	canplaythrough	progress
load	load

視訊導入時發生的事件及順序（伺服器）

Firefox 3.6	Safari 4/5*1	Chrome 4/5	iPad *2
suspend	loadstart	loadstart	durationchange
canplay	durationchange	suspend	loadedmetadata
progress	loadedmetadata	durationchange	loadeddata
loadeddata	loadedmetadata	canplay
canplay	loadeddata	canplaythrough

視訊播放時發生的事件及順序（本地）

Firefox 3.6	Safari 4/5*1	Chrome 4/5
play	play	play
playing	playing	playing
timeupdate	timeupdate	timeupdate
ended	ended	ended

視訊播放時發生的事件及順序

Firefox 3.6	Safari 4/5	Chrome 4/5	iPad *3
play	play	play	play
playing	playing	playing	playing
timeupdate	timeupdate	timeupdate	timeupdate
progress	ended	ended	ended
waiting
canplay
playing
canplaythrough
suspend
ended

注意：

（1）、資料在伺服器上時，Safari 4/5儲存相同的頻率。

（2）、iPad上不能進行本地測試，隻進行了伺服器上的測試。

--------->>後續《Video&Audio(執行個體篇)》

Video&Audio（進階篇）

講解：

Video和Audio的方法與屬性：

事件以及事件發生順序：

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

Video&amp;Audio（進階篇）

講解：

Video和Audio的方法與屬性：

事件以及事件發生順序：

繼續閱讀

Video&Audio（進階篇）