html5已經為我們提供了音頻和視頻的控制讓我們不必在依賴于Flash。本次我將為大家講解html5的音頻和視頻操作以及利用工具對音頻和視頻進行編碼操作以適應不同的瀏覽器使用不同的音頻視頻文件。好的，進入我們的正題。開飯。。。。
html5的音頻Audio
html5規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。audio功能上已經非常強大，回放，跳轉，緩沖等以前只能用flash才能實現的功能，html5的audio都能輕松搞定。
1.audio標簽屬性
src:音樂的URL
preload:預加載
autoplay:自動播放
loop:循環播放
controls:瀏覽器自帶的控制條
2.控制函數功能說明
load(): 加載音頻、視頻軟件，通常不必調用，除非是動態生成的元素，用來在播放前預加載。
play() : 加載并播放音頻、視頻文件，除非文件已經暫停在其他位置，否則默認重頭開始播放。
pause() :暫停處于播放狀態的音頻、視頻文件。
canPlayType():檢測瀏覽器是否能播放指定的音頻/視頻類型
addTextTrack():向音頻/視頻添加新的文本軌道
3.只讀屬性屬性說明
duration :獲取媒體文件的播放時長，以s為單位，如果無法獲取，則為NaN。
paused :如果媒體文件被暫停，則返回true，否則返回false。
ended :如果媒體文件播放完畢，則返回true。
startTime :返回起始播放時間，一般是0.0，除非是緩沖過的媒體文件，并且一部分內容已經不在緩沖區。
error : 在發生了錯誤后返回的錯誤代碼。
currentSrc : 以字符串形式返回正在播放或已加載的文件，對應于瀏覽器在source元素中選擇的文件。
4.可腳本控制的特性值
autoplay:自動播放已經加載的的媒體文件，或查詢是否已設置為autoplay
loop:將媒體文件設置為循環播放，或查詢是否已設置為loop
currentTime:以s為單位返回從開始播放到目前所花的時間，也可設置currentTime的值來跳轉到特定位置
controls: 顯示或者隱藏用戶控制界面
volume:在0.0到1.0間設置音量值,或查詢當前音量值
muted:設置是否靜音
autobuffer:媒體文件播放前是否進行緩沖加載，如果設置了autoplay，則忽略此特性
注意:對于這些屬性，主流的瀏覽器都支持。可是別以為就沒有了兼容性，在音頻播放流中，有兩個陣營。firefox 和 opera 支持 ogg 音頻，safari 和 ie 支持 mp3.幸好Google的chrome都支持。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">獲取播放時間</a>
<a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>
<a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隱藏控制框</a>
<a href="javascript:void(0);" onclick="muted('firefox',this);">開啟靜音</a>
<input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
<audio src="薛之謙 - 剛剛好.mp3" id="audio" controls="controls" ></audio>
當前音量：<span id = "nowVol"> - </span>
</body>
<script>
var audio ;
window.onload = function(){
initAudio();
}
var initAudio = function(){
//audio = document.createElement("audio")
//audio.src='Never Say Good Bye.ogg'
audio = document.getElementById('audio');
}
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + '：秒');
}
function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML='暫停';
return;
}
audio.pause();
obj.innerHTML='播放';
}
function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML = '顯示控制框'
return;
}
audio.controls = 'controls';
obj.innerHTML = '隱藏控制框'
return;
}
function vol(id,type , obj){
if(type == 'up'){
var volume = audio.volume + 0.1;
if(volume >=1 ){
volume = 1 ;
}
audio.volume = volume;
}else if(type == 'down'){
var volume = audio.volume - 0.1;
if(volume <=0 ){
volume = 0 ;
}
audio.volume = volume;
}
document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
}
function muted(id,obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = '開啟靜音';
}else{
audio.muted = true;
obj.innerHTML = '關閉靜音';
}
}
//保留一位小數點
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}
</script>
</html>
效果：
有時候我們為了解決兼容性問題會和<source>標簽配合使用，<source>標簽可以有多個，當瀏覽器不支持的時候會往下執行，找尋一個可以執行的，如果沒有則顯示默認的效果。代碼如下：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
html5的視頻video
<video> 標簽定義視頻，比如電影片段或其他視頻流。
提示：可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
1.video的標簽屬性
src:視頻的URL
poster:視頻封面，沒有播放時顯示的圖片
preload:預加載
autoplay:自動播放
loop:循環播放
controls:瀏覽器自帶的控制條
width:視頻寬度
height:視頻高度
2.video的控制函數
load(): 加載音頻、視頻軟件，通常不必調用，除非是動態生成的元素，用來在播放前預加載。
play() : 加載并播放音頻、視頻文件，除非文件已經暫停在其他位置，否則默認重頭開始播放。
pause() :暫停處于播放狀態的音頻、視頻文件。
canPlayType():檢測瀏覽器是否能播放指定的音頻/視頻類型
addTextTrack():向音頻/視頻添加新的文本軌道
3.video的常用屬性
currentSrc:返回當前音頻/視頻的 URL
currentTime:設置或返回音頻/視頻中的當前播放位置（以秒計）
duration:返回當前音頻/視頻的長度（以秒計）
ended:返回音頻/視頻的播放是否已結束
error:返回表示音頻/視頻錯誤狀態的 MediaError 對象
paused:設置或返回音頻/視頻是否暫停
muted:設置或返回音頻/視頻是否靜音
seeking:返回用戶是否正在音頻/視頻中進行查找
volume:設置或返回音頻/視頻的音量
height: 返回當前視頻的高度
width:返回當前視頻的寬度
注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后，其他屬性才可用。
3.video的常用監聽事件
onabort:在退出時運行的腳本。
oncanplay:當文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時）。
oncanplaythrough:當媒介能夠無需因緩沖而停止即可播放至結尾時運行的腳本。
ondurationchange:當媒介長度改變時運行的腳本。
onemptied:當發生故障并且文件突然不可用時運行的腳本（比如連接意外斷開時）。
onended:當媒介已到達結尾時運行的腳本（可發送類似“感謝觀看”之類的消息）。
onerror:當在文件加載期間發生錯誤時運行的腳本。
onloadeddata:當媒介數據已加載時運行的腳本。
onloadedmetadata:當元數據（比如分辨率和時長）被加載時運行的腳本。
onloadstart:在文件開始加載且未實際加載任何數據前運行的腳本。
onpause:當媒介被用戶或程序暫停時運行的腳本。
onplay:當媒介已就緒可以開始播放時運行的腳本。
onplaying:當媒介已開始播放時運行的腳本。
onprogress:當瀏覽器正在獲取媒介數據時運行的腳本。
onratechange:每當回放速率改變時運行的腳本（比如當用戶切換到慢動作或快進模式）。
onreadystatechange:每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）。
onseeked:當 seeking 屬性設置為 false（指示定位已結束）時運行的腳本。
onseeking:當 seeking 屬性設置為 true（指示定位是活動的）時運行的腳本。
onstalled:在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。
onsuspend:在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。
ontimeupdate:當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。
onvolumechange:每當音量改變時（包括將音量設置為靜音）時運行的腳本。
onwaiting:當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多數據）運行腳本
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Video step2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<video id="myVideo" controls preload="auto" width=300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>
<button onclick="play()">播放</button>
<button onclick="pause()">暫停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">縮小</button>
<button onclick="makeNormal()">普通</button>
<script>
//獲取video元素
var myVideo = document.getElementById('myVideo'),tol = 0;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//獲取總時長
});
//播放
function play(){
myVideo.play();
}
//暫停
function pause(){
myVideo.pause();
}
//播放時間點更新時
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//獲取當前播放時間
console.log(currentTime);//在調試器中打印
});
//設置播放點
function playBySeconds(num){
myVideo.currentTime = num;
}
//音量改變時
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//獲取當前音量
console.log(volume);//在調試器中打印
});
//設置音量
function setVol(num){
myVideo.volume = num;
}
//放大
function makeBig()
{
myVideo.width=560;
}
//縮小
function makeSmall()
{
myVideo.width=320;
}
//恢復
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
效果：
video也可以使用<source>標簽進行兼容性調試。代碼如下：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>
編解碼工具FFmpeg
FFmpeg是一套可以用來記錄、轉換數字音頻、視頻，并能將其轉化為流的開源計算機程序。采用LGPL或GPL許可證。它提供了錄制、轉換以及流化音視頻的完整解決方案。它包含了非常先進的音頻/視頻編解碼庫libavcodec，為了保證高可移植性和編解碼質量，libavcodec里很多code都是從頭開發的。
ffmpeg官網下載windows版本。本文寫作時只是直接下載了已經編譯好的ffmpeg.exe來進行相關操作，沒有涉及到ffmpeg在windows下的編
譯。首先在D盤創建ffmpeg目錄，將下載好的ffmpeg.exe文件拖入該文件夾中，并放入測試視頻1.mov。
進入 cmd ，輸入 D: 進入d盤 ，
輸入 cd ffmpeg 進入 ffmpeg 目錄
輸入 ffmpeg.exe -i D:\ffmpeg\1.mov -ar 44100 -r 29.97 -s 1280x720 D:\ffmpeg\1.mp4 即可完成轉換。
轉換需要一定的時間。
詳細教程請參照：FFmpeg快速入門
感謝大家的觀看，學習在于練習，希望大家多多練習！一起加油
