文檔
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'; min-height: 17.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}span.s1 {font: 12.0px Helvetica}span.s2 {font: 12.0px 'PingFang SC'}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: square}ul.ul2 {list-style-type: check}
音頻和視頻
1、概述
a.容器（container）和編解碼器（coder）
》視頻容器
音頻文件或視頻文件，都只是一個(gè)容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數(shù)據(jù)。視頻播放時(shí)，音頻軌道和視頻軌道是綁定在一起的。元數(shù)據(jù)包含了視頻的封面、標(biāo)題、子標(biāo)題、字幕等相關(guān)信息。主流視頻容器支持的格式為：avi、flv、MP4、mkv、ogg、webm。
》編解碼器
音頻和視頻編碼/解碼是一組算法，用來對一段特定音頻或視頻進(jìn)行解碼和編碼，以便音頻和視頻能夠播放。原始的媒體文件體積非常巨大，如果不對其進(jìn)行編碼，那么數(shù)據(jù)量是非常驚人的，在互聯(lián)網(wǎng)上傳播則要耗費(fèi)無法忍受的時(shí)間。如果不對其進(jìn)行解碼，就無法將編碼后的數(shù)據(jù)重組為原始的媒體數(shù)據(jù)。主流的音頻編解碼器：AAC，MPEG-3，0gg Voribs，視頻編解碼器：H.264,VP8,ogg Theora。
》瀏覽器的支持情況
2、video視頻元素
src：視頻資源的url，必需
width:視頻寬度
heitgh:視頻高度
autoplay:設(shè)置后，表示立刻開始播放視頻
preload:設(shè)置后，表示預(yù)先載入視頻
controls:設(shè)置后，表示顯示播放控件
loop：設(shè)置后，表示反復(fù)播放視頻
muted：設(shè)置后，表示視頻處于靜音狀態(tài)
poster：置頂視頻數(shù)據(jù)載入時(shí)顯示的圖片
<video src="loginmovie.mp4" width="500" height="300" controls></video>
谷歌瀏覽器顯示
Safari顯示
如果是從服務(wù)器獲取的視頻的話，會(huì)有緩存。第一次緩存之后，以后就會(huì)直接播放了。
預(yù)加載設(shè)置preload
preload屬性有三個(gè)值：
none表示播放器什么都不加載
metadata表示播放之前只能加載元數(shù)據(jù)（寬高、第一幀畫面等信息）
auto表示請求瀏覽器盡快下載整個(gè)視頻
瀏覽器支持
瀏覽器不支持的時(shí)候可以多準(zhǔn)備集中類型的視頻，寫法如下
<video width="640" height="480" controls>
<source src="test.webm">
<source src=test.mp4>
<source src=test.ogg>
</video>
這樣不同的瀏覽器會(huì)選擇自己支持的類型進(jìn)行播放。
3、audio音頻元素
》屬性：
src：音頻資源url
autoplay:設(shè)置后，表示立刻開始播放音頻
preload：設(shè)置后，表示預(yù)先載入音頻
controls：設(shè)置后，表示顯示播放控件
》嵌入音頻
<audio src="劉珂矣-風(fēng)箏誤.mp3" controls></audio>
如果不加controls，什么都不會(huì)顯示，類似背景音樂的效果。
<audio src="劉珂矣-風(fēng)箏誤.mp3" autoplay></audio>
萬一出現(xiàn)不支持的情況，就需要類似視頻一樣做兼容處理。
<audio>
<source src="劉珂矣-風(fēng)箏誤.mp3">
<source src="劉珂矣-風(fēng)箏誤.m4a">
<source src="劉珂矣-風(fēng)箏誤.wav">
</audio>
瀏覽器會(huì)自動(dòng)選擇支持的格式。
源碼
html01:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>音頻和視頻</title>
</head>
<body>
<br><br>
音頻和視頻
<hr><br>
<!-- <video src="loginmovie.mp4" width="500" height="300" controls loop muted></video> -->
<video src="loginmovie.mp4" width="500" height="300" controls poster="../img/img.jpg"></video>
<br><br>
從網(wǎng)址上獲取視頻
<br><br>
<video src="http://video.myhaowai.cn/2016/11/29/2b2146d2cb3a9c7f56266e8ecd6be676.mp4" width="500" height="300" controls preload="auto"></video>
<br><br>
<video width="640" height="480" controls>
<source src="test.webm">
<source src=test.mp4>
<object>實(shí)現(xiàn)flash插件的播放，如果屏蔽IE9以下則不需要</object>
</video>
</body>
</html>
html02:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>音頻和視頻</title>
</head>
<body>
<br><br>
音頻和視頻
<hr><br>
<audio src="劉珂矣-風(fēng)箏誤.mp3" controls></audio>
<br>不兼容處理
<audio>
<source src="劉珂矣-風(fēng)箏誤.mp3">
<source src="劉珂矣-風(fēng)箏誤.m4a">
<source src="劉珂矣-風(fēng)箏誤.wav">
</audio>
</body>
</html>
