1.視頻處理：
1.<video src="一種格式" autoplay></video>標簽 不影響HTML頁面，耗顯卡和cpu
如果當前浏覽器不支持video元素，可以在video元素內編寫提示信息；<video>浏覽器不支持</video> *****
<video>支持的視頻格式
MP4格式 - 目前比較主流
OGG格式 - 多用於移動端
WebM格式 - 目前唯一支持超高清格式
* 在HTML頁面中支持超高清格式(HTML5)
* 由Google公司推出的
屬性：
- src 引入路徑
支持的視頻格式：
.mp4(主流)
.ogv(OGG格式的一種，用於移動端)
.webm(在HTML5頁面中，目前唯一支持超高清格式 1080p，由Google退出)
- autoplay 自動播放;只定義屬性名，沒有屬性值
- controls 視頻播放的控制面板;只定義屬性名，沒有屬性值
- loop 視頻循環播放;只定義屬性名，沒有屬性值
- poster="img" 播放之前先引入一張圖片
- width,height
- preload 預加載
auto 自動加載，盡快加載完畢，默認
none 不加載（不能被緩存，版權保護）
metadata只加載視頻基本信息（視頻名稱，寬高等，不包含視頻）
2.在video元素中 可以包含多個<source>元素,可以放不同格式的相同視頻，兼容各個浏覽器；
<video autoplay>
浏覽器不支持
<source src="mp4格式" />
<source src="ogv格式" />
<source src="webm格式" />
</video>
高級內容：
方法：
- play() 視頻播放
- pause() 視頻暫停
- load() 視頻加載
- canPlayType() 判斷浏覽器是否支持指定視頻格式；
事件：
- play 視頻播放時觸發
- pause 視頻暫停時觸發
- ended 視頻結束時觸發 第一集播完指向第二集 改變src
- error 視頻播放“錯誤”時觸發
- canplay 不考慮整體情況下，只要能播放就播放
- canplaythrough考慮整體
- progress 視頻加載的進度
屬性：表示判斷的 返回布爾值 true/false
- paused 判斷當前是否暫停
- ended 判斷當前是否播放完畢
- duration 表示當前視頻的時長
- currentTime 表示當前視頻播放的位置
例子:自定義控制面板
問題：video元素與其他元素是相對定位時，當video視頻全屏時，默認在浏覽器最前端，廣告被覆蓋；所以不能全屏；
解決：利用video元素提供的高級編程自己實現；
使用目前封裝好的video的js庫；
【video-js庫】
<!DOCTYPE html>
<html>
<head>
<title>video</title>
<meta charset="utf-8" />
</head>
<body>
<video controls style="width:640px;height:400px;background:#000;" poster="DATA/oceans-clip.png">
你的浏覽器不支持視頻
<source src="DATA/oceans-clip.mp4" />
<source src="DATA/oceans-clip.ogv" />
<source src="DATA/oceans-clip.webm" />
</video>
<video src="DATA/oceans-clip.mp4" autoplay loop poster="DATA/oceans-clip.png" style="width:1000px;">你的浏覽器不支持視頻</video>
</body>
</html>
2.音頻處理：
<audio>元素
audio支持的音頻格式：
MP3格式 - 目前比較主流
OGG格式
WAV格式
1.<audio src controls></audio> 設置controls才能看見；
2.
<audio>
浏覽器不支持
<source src="mp3格式" />
<source src="格式" />
<source src="格式" />
</audio>
用法同video