必學必會-音頻和視頻

時間 2021-01-17

標籤 javascript html 前端 java git 程序員 github web 算法瀏覽器欄目 JavaScript 简体版

原文原文鏈接

哪吒人生信條：若是你所學的東西處於喜歡纔會有強大的動力支撐。javascript

把你的前端拿捏得死死的，天天學習得爽爽的，關注這個不同的程序員，若是你所學的東西處於喜歡纔會有強大的動力支撐。
感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關注加我入羣vx:xiaoda0423html

前言

但願能夠經過這篇文章，可以給你獲得幫助。(感謝一鍵三連)前端

學習深刻理解HTML5的audio和video。java

`HTML5`視頻概述

在HTML5播放一個視頻，很簡單，只須要一行代碼：git

<video src="resources/dadaqianduan.mp4" autoplay></video>

瞭解多媒體術語

瞭解視頻文件格式：程序員

Audio Video InterLeaved .avi

Flash Video .flv

MPEG-4 .mp4

Matroska .mkv

Ogg .ogv

音頻和視頻編解碼器github

編解碼器能夠理解爲一些算法代碼，用於處理視頻，音頻或者其元數據的編碼格式。對音頻或視頻文件進行編碼，可以使得文件大大縮小，便於在因特網上傳輸。web

音頻編解碼器：算法

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

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，咱們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一塊兒學習了)

咱們下期見！

文章持續更新，本文 http://www.dadaqianduan.cn/#/ 已經收錄
github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

必學必會-音頻和視頻

前言

HTML5視頻概述