前言
希望可以通過這篇文章,能夠給你得到幫助。(感謝一鍵三連)
學習深入理解HTML5
的audio
和video
。
HTML5
視頻概述
在HTML5
播放一個視頻,很簡單,只需要一行代碼:
<video src="resources/dadaqianduan.mp4" autoplay></video>
瞭解多媒體術語
瞭解視頻文件格式:
Audio Video InterLeaved .avi
Flash Video .flv
MPEG-4 .mp4
Matroska .mkv
Ogg .ogv
音頻和視頻編解碼器
編解碼器可以理解爲一些算法代碼,用於處理視頻,音頻或者其元數據的編碼格式。對音頻或視頻文件進行編碼,可使得文件大大縮小,便於在因特網上傳輸。
音頻編解碼器:
MP3
,使用ACC
音頻
Wav
,使用Wav
音頻
Ogg
,使用OggVorbis
音頻
視頻編解碼器:
MP4
,使用H.264
視頻,AAC
音頻
WebM
,使用VP8
視頻,OggVorbis
音頻
Ogg
,使用Theora
視頻,OggVorbis
音頻
多媒體文件格式
audio
元素支持的音頻格式MP3,Wav,Ogg
;video
元素支持的格式MP4,WebM,Ogg
。
-
audio
元素是專門用於在網頁中播放網絡音頻的 -
video
元素是專門用於在網頁中播放視頻的
在HTML5
中audio
和video
元素提供的接口包含了一系列的屬性,方法和事件,這些接口可以幫助開發完成對音頻和視頻的操作。
那麼如何在頁面中添加音頻和視頻呢?
音頻
<audio src="resources/audio.mp3">
</audio>
視頻
<video src="resources/video.mp4" width="600" height="200">
</video>
使用source
元素
因爲各種瀏覽器對音頻和視頻的編解碼器的支持不一樣,爲了能夠在各種瀏覽器中正常使用,可以提供多個源文件。
<audio src="resources/audio.mp3">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
<video src="resources/video.mp4" width="600" height="200" controls>
<source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
<source src="movie.mp4" type="video/mp4">
</video>
使用
source
元素替代了audio
或video
的標籤屬性src
。
-
src
屬性用於指定媒體文件的url
地址 -
type
屬性用於指定媒體文件的類型,屬性值爲媒體文件的MIME
類型,該屬性值還可以通過codes
參數指定編碼格式
audio
和video
特性和屬性
元素的標籤特性
-
src
,源文件特性,用於指定媒體文件的url
地址 -
autoplay
,自動播放特性,表示媒體文件加載後自動播放。
<video src="resources/video.mp4" autoplay></video>
-
controls
,控制條特性,表示爲視頻或音頻添加自帶的播放控制條。
<video src="resources/video.mp4" controls></video>
-
loop
,循環特性,表示音頻或視頻循環播放。
<video src="resources/video.mp4" controls loop></video>
-
preload
,預加載特性,表示頁面加載完成後如何加載視頻數據。
-
none
表示不進行預加載 -
metadata
表示只加載媒體文件的元數據 -
auto
表示加載全部視頻或音頻,默認值爲auto
<video src="resources/video.mp4" controls preload="auto"></video>
-
poster
是video
元素獨有的特性,替代內容屬性,用於指定一副替代圖片的url
地址,當視頻不可以用時,會顯示該替代圖片。
<video src="resources/video.mp4" controls poster="images/none.jpg"</video>
-
width
和height
,video
元素獨有的特性,用於指定視頻的寬度和高度
<video src="resources/video.mp4" width="600" height="200" controls></video>
接口屬性
-
currentSrc
,只讀,獲取當前正在播放或已加載的媒體文件的url
地址 -
videoWidth
,只讀,video
元素特有屬性,獲取視頻原始的寬度 -
videoHeight
,只讀,video
元素特有屬性,獲取視頻原始的高度 -
currentTime
,獲取或設置當前媒體播放位置的時間點 -
startTime
,只讀,獲取當前媒體播放的開始時間 -
duration
,只讀,獲取整個媒體文件的播放時長 -
volume
,獲取或設置媒體文件播放時的音量,取值範圍在0.0
到0.1
之間 -
muted
,獲取或設置媒體文件播放時是否靜音。true
表示靜音,false
表示消除靜音 -
ended
,只讀,如果媒體文件已經播放完畢則返回true
,否則返回false
-
error
,只讀,讀取媒體文件的錯誤代碼 -
played
,只讀,獲取已播放媒體的TimesRanges
對象,該對象內容包括已播放部分的開始時間和結束時間。 -
paused
,只讀,如果媒體文件當前是暫停或未播放則返回true
,否則返回false
-
seeking
,只讀,獲取瀏覽器是否正在請求媒體數據 -
seekable
,只讀,獲取媒體資源已請求的TimesRanges
對象,該對象內容包括已請求部分的開始時間和結束時間 -
networkState
,只讀,獲取媒體資源的加載狀態 -
buffered
,只讀,獲取本地緩存的媒體數據的TimesRanges
對象 -
readyState
,只讀,獲取當前媒體播放的就緒狀態 -
playbackRate
,獲取或設置媒體當前的播放速率 -
defaultPlaybackRate
,獲取或設置媒體默認的播放速率
視頻播放的快進
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>視頻播放時的快進</title>
<script type="text/javascript">
function Forward() {
var el = document.getElementById("myPlayer");
var time = el.currentTime;
el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快進" onclick="Forward()"/>
</body>
</html>
audio
和video
接口方法
接口方法
-
load()
,加載媒體文件,爲播放做準備。 -
play()
,播放媒體文件。 -
pause()
,暫停播放媒體文件。 -
canPlayType()
,測試瀏覽器是否支持指定的媒體類型。
代碼示例使用接口:
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放與暫停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
videoEl.play();
}
function Pause() {
videoEl.pause();
}
window.onload = function(){
videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
<source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="播放" onclick="Play()"/>
<input type="button" value="暫停" onclick="Pause()"/>
</body>
</html>
audio
和video
事件
捕獲事件的方式
捕獲事件有兩種方法:一種是添加事件句柄,一種是監聽。
<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>
// 監聽方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);
接口事件
-
play
,當執行方法play()
時觸發 -
playing
,正在播放時觸發 -
pause
,當執行了方法pause()
時觸發 -
timeupdate
,當播放位置被改變時觸發 -
ended
,當播放結束後停止播放時觸發 -
waiting
,在等待加載下一幀時觸發 -
ratechange
,在當前播放速率改變時觸發 -
volumechange
,在音量改變時觸發 -
canplay
,以當前播放速率需要緩衝時觸發 -
canplaythrough
,以當前播放速率不需要緩衝時觸發 -
durationchange
,當播放時長改變時觸發 -
loadstart
,當瀏覽器開始在網上尋找數據時觸發 -
progress
,當瀏覽器正在獲取媒體文件時觸發 -
suspend
,當瀏覽器暫停獲取媒體文件,且文件獲取並不是正常結束時觸發 -
abort
,當中止獲取媒體數據時觸發 -
error
,在獲取媒體過程中出錯時觸發 -
emptied
,當所在網絡變爲初始化狀態時觸發 -
stalled
,在瀏覽器嘗試獲取媒體數據失敗時觸發 -
seeking
,在瀏覽器正在請求數據時觸發 -
seeded
,在瀏覽器停止請求數據時觸發
定義全局的視頻對象
代碼如下:
<script type="text/javascript">
// 定義全局視頻對象
var videoEl = null;
// 網頁加載完畢後,讀取視頻對象
window.addEventListener("load", function() {
videoEl = document.getElementById("myPlayer")
});
</script>
添加進度顯示功能
代碼如下:
<script type="text/javascript">
function Progress() {
var el = document.getElementById("progress");
el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}
function s2time(s) {
var m = parseFloat(s/60).toFixed(0);
s = parseFloat(s%60).toFixed(0);
return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)
添加靜音和調節音量的功能
消除靜音videoEl.muted=false
;靜音效果videoEl.muted=true
;videoEl.volume=e.value;
修改音量的值。
添加慢進和快進功能
videoEl.playbackRate-=0.2;
videoEl.playbackRate-=1;
// 顯示播放速率
document.getElementById("rate").innerHTML=fps2fps(videoEl.playbackRate);