前 言
現在網上有許多的框架和插件，能夠滿足程序猿的各種需求，慢慢的，就有些忽視最基礎的東西。比如，大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標准方法。
所以，今天影子向大家介紹的，就是HTML5對音視頻的處理。
| 一、 優勢 |
1 關於視頻不用插件播放，點擊就能看
2 跨平台、好升級、好維護，開發成本相對原生APP低很多
3 對移動的良好支持，支持手勢，本地存儲和視頻續播等，通過H5就可以把自己的網站移動化。
4 更為簡潔的代碼，更好的交互
5 支持游戲開發
| 二、 兼容性 |
<video id="video"> <source src="movie/chenai.mp4"></source> 您的瀏覽器不支持 HTML5 video 標簽。 </video>
注釋：
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。
即，如果，瀏覽器不支持，則會顯示" 您的瀏覽器不支持 HTML5 video 標簽。 "。
| 三、 兩種方式 |
// 方式一 <video src="movie/chenai.mp4h"loop="loop"></video> // 方式二 <video width="320" height="240">
<source src="movie/chenai.mp4"></source>
</video>
注釋：
<video> 元素元素提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
| 四、video標簽的新增屬性 |
1、controls：給視頻添加播放控件。如：開始。暫停
2、autoplay：視頻就緒后馬上播放
3、loop：表示循環播放
4、muted：表示視屏靜音輸出
| 五、 用於操作DOM的方法和屬性 |
5.1用於操作DOM的方法
1、play():表示視頻播放
2、pause():表示視頻暫停
5.2用於操作DOM的屬性
1、paused：設置或返回音視頻是否被暫停
2、autoplay：設置或返回音視頻加載完之后是否立即播放
3、controls：設置或返回音視頻是否添加控件
4、duration：獲取音視頻的總時間，單位：秒
5、currentTime：獲取當前播放時間
6、defaultMuted：設置音視頻是否靜音輸出 true -- 靜音 默認false，不靜音
7、muted：設置或返回當前播放音視頻是否是靜音輸出。true -- 靜音 false --- 不是靜音
8、playbackRate：設置音視頻播放速度。1.0表示正常；0.5表示半速；2.0表示倍速
9、loop：設置是否循環播放。true -- 循環播放 false -- 不循環播放
10、volume：設置或返回音視頻的音量。介於1~0之間的數
11、ended：返回音視頻是否播放結束。false -- 未結束 true -- 已結束
| 六、 實例 |
6.1內代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> video{ width: 600px; height:500px; } </style> </head> <body> <!--<video src="movie/chenai.mp4h"loop="loop"></video>--> <video id="video"> <source src="movie/chenai.mp4"></source> 您的瀏覽器不支持 HTML5 video 標簽。 </video> <br /> <button onclick="bofang()">點擊播放/暫停</button> <button onclick="timeAll()">點擊獲取總時間 </button> <button onclick="timeBf()">點擊獲取當前時間 </button> <button onclick="jingyin()">點擊靜音 </button> <button onclick="yinliang()">點擊獲取音量 </button> <button onclick="end()">是否播放結束 </button> </body> <script type="text/javascript"> var video = document.getElementById("video"); //點擊播放或暫停 function bofang(){ if (video.paused) {//播放狀態:是否暫停 video.play(); }else video.pause(); } video.autoplay = true; video.controls = false; function timeAll(){ alert(video.duration); // -- 音視頻的總時間 } function timeBf(){ alert(video.currentTime);// -- 當前時間 } video.defaultMuted = false; function jingyin(){ if (video.muted == false) video.muted = true; else video.muted = false; } video.playbackRate = 1.0; // -- 改變播放速度 video.loop = true; // -- 是否循環播放 function yinliang(){ video.volume = 0.5; alert(video.volume); } function end(){ alert(video.ended); } </script> </html>
6.2效果
今天，影子主要是分享的對視屏的處理，那是因為，音頻的處理只是換成了audio便簽而已，所以，影子就不多啰嗦了。相信大家也是理解的。