html5已經(jīng)為我們提供了音頻和視頻的控制讓我們不必在依賴于Flash。本次我將為大家講解html5的音頻和視頻操作以及利用工具對音頻和視頻進行編碼操作以適應(yīng)不同的瀏覽器使用不同的音頻視頻文件。好的，進入我們的正題。開飯。。。。
html5的音頻Audio
html5規(guī)定了在網(wǎng)頁上嵌入音頻元素的標準，即使用 <audio> 元素。audio功能上已經(jīng)非常強大，回放，跳轉(zhuǎn)，緩沖等以前只能用flash才能實現(xiàn)的功能，html5的audio都能輕松搞定。
1.audio標簽屬性
src:音樂的URL
preload:預(yù)加載
autoplay:自動播放
loop:循環(huán)播放
controls:瀏覽器自帶的控制條
2.控制函數(shù)功能說明
load(): 加載音頻、視頻軟件，通常不必調(diào)用，除非是動態(tài)生成的元素，用來在播放前預(yù)加載。
play() : 加載并播放音頻、視頻文件，除非文件已經(jīng)暫停在其他位置，否則默認重頭開始播放。
pause() :暫停處于播放狀態(tài)的音頻、視頻文件。
canPlayType():檢測瀏覽器是否能播放指定的音頻/視頻類型
addTextTrack():向音頻/視頻添加新的文本軌道
3.只讀屬性屬性說明
duration :獲取媒體文件的播放時長，以s為單位，如果無法獲取，則為NaN。
paused :如果媒體文件被暫停，則返回true，否則返回false。
ended :如果媒體文件播放完畢，則返回true。
startTime :返回起始播放時間，一般是0.0，除非是緩沖過的媒體文件，并且一部分內(nèi)容已經(jīng)不在緩沖區(qū)。
error : 在發(fā)生了錯誤后返回的錯誤代碼。
currentSrc : 以字符串形式返回正在播放或已加載的文件，對應(yīng)于瀏覽器在source元素中選擇的文件。
4.可腳本控制的特性值
autoplay:自動播放已經(jīng)加載的的媒體文件，或查詢是否已設(shè)置為autoplay
loop:將媒體文件設(shè)置為循環(huán)播放，或查詢是否已設(shè)置為loop
currentTime:以s為單位返回從開始播放到目前所花的時間，也可設(shè)置currentTime的值來跳轉(zhuǎn)到特定位置
controls: 顯示或者隱藏用戶控制界面
volume:在0.0到1.0間設(shè)置音量值,或查詢當(dāng)前音量值
muted:設(shè)置是否靜音
autobuffer:媒體文件播放前是否進行緩沖加載，如果設(shè)置了autoplay，則忽略此特性
注意:對于這些屬性，主流的瀏覽器都支持?？墒莿e以為就沒有了兼容性，在音頻播放流中，有兩個陣營。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>
當(dāng)前音量：<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 = '關(guān)閉靜音';
}
}
//保留一位小數(shù)點
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}
</script>
</html>
效果：
有時候我們?yōu)榱私鉀Q兼容性問題會和<source>標簽配合使用，<source>標簽可以有多個，當(dāng)瀏覽器不支持的時候會往下執(zhí)行，找尋一個可以執(zhí)行的，如果沒有則顯示默認的效果。代碼如下：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
html5的視頻video
<video> 標簽定義視頻，比如電影片段或其他視頻流。
提示：可以在開始標簽和結(jié)束標簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
1.video的標簽屬性
src:視頻的URL
poster:視頻封面，沒有播放時顯示的圖片
preload:預(yù)加載
autoplay:自動播放
loop:循環(huán)播放
controls:瀏覽器自帶的控制條
width:視頻寬度
height:視頻高度
2.video的控制函數(shù)
load(): 加載音頻、視頻軟件，通常不必調(diào)用，除非是動態(tài)生成的元素，用來在播放前預(yù)加載。
play() : 加載并播放音頻、視頻文件，除非文件已經(jīng)暫停在其他位置，否則默認重頭開始播放。
pause() :暫停處于播放狀態(tài)的音頻、視頻文件。
canPlayType():檢測瀏覽器是否能播放指定的音頻/視頻類型
addTextTrack():向音頻/視頻添加新的文本軌道
3.video的常用屬性
currentSrc:返回當(dāng)前音頻/視頻的 URL
currentTime:設(shè)置或返回音頻/視頻中的當(dāng)前播放位置（以秒計）
duration:返回當(dāng)前音頻/視頻的長度（以秒計）
ended:返回音頻/視頻的播放是否已結(jié)束
error:返回表示音頻/視頻錯誤狀態(tài)的 MediaError 對象
paused:設(shè)置或返回音頻/視頻是否暫停
muted:設(shè)置或返回音頻/視頻是否靜音
seeking:返回用戶是否正在音頻/視頻中進行查找
volume:設(shè)置或返回音頻/視頻的音量
height: 返回當(dāng)前視頻的高度
width:返回當(dāng)前視頻的寬度
注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用。
3.video的常用監(jiān)聽事件
onabort:在退出時運行的腳本。
oncanplay:當(dāng)文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時）。
oncanplaythrough:當(dāng)媒介能夠無需因緩沖而停止即可播放至結(jié)尾時運行的腳本。
ondurationchange:當(dāng)媒介長度改變時運行的腳本。
onemptied:當(dāng)發(fā)生故障并且文件突然不可用時運行的腳本（比如連接意外斷開時）。
onended:當(dāng)媒介已到達結(jié)尾時運行的腳本（可發(fā)送類似“感謝觀看”之類的消息）。
onerror:當(dāng)在文件加載期間發(fā)生錯誤時運行的腳本。
onloadeddata:當(dāng)媒介數(shù)據(jù)已加載時運行的腳本。
onloadedmetadata:當(dāng)元數(shù)據(jù)（比如分辨率和時長）被加載時運行的腳本。
onloadstart:在文件開始加載且未實際加載任何數(shù)據(jù)前運行的腳本。
onpause:當(dāng)媒介被用戶或程序暫停時運行的腳本。
onplay:當(dāng)媒介已就緒可以開始播放時運行的腳本。
onplaying:當(dāng)媒介已開始播放時運行的腳本。
onprogress:當(dāng)瀏覽器正在獲取媒介數(shù)據(jù)時運行的腳本。
onratechange:每當(dāng)回放速率改變時運行的腳本（比如當(dāng)用戶切換到慢動作或快進模式）。
onreadystatechange:每當(dāng)就緒狀態(tài)改變時運行的腳本（就緒狀態(tài)監(jiān)測媒介數(shù)據(jù)的狀態(tài)）。
onseeked:當(dāng) seeking 屬性設(shè)置為 false（指示定位已結(jié)束）時運行的腳本。
onseeking:當(dāng) seeking 屬性設(shè)置為 true（指示定位是活動的）時運行的腳本。
onstalled:在瀏覽器不論何種原因未能取回媒介數(shù)據(jù)時運行的腳本。
onsuspend:在媒介數(shù)據(jù)完全加載之前不論何種原因終止取回媒介數(shù)據(jù)時運行的腳本。
ontimeupdate:當(dāng)播放位置改變時（比如當(dāng)用戶快進到媒介中一個不同的位置時）運行的腳本。
onvolumechange:每當(dāng)音量改變時（包括將音量設(shè)置為靜音）時運行的腳本。
onwaiting:當(dāng)媒介已停止播放但打算繼續(xù)播放時（比如當(dāng)媒介暫停已緩沖更多數(shù)據(jù)）運行腳本
代碼如下：
<!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;//獲取當(dāng)前播放時間
console.log(currentTime);//在調(diào)試器中打印
});
//設(shè)置播放點
function playBySeconds(num){
myVideo.currentTime = num;
}
//音量改變時
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//獲取當(dāng)前音量
console.log(volume);//在調(diào)試器中打印
});
//設(shè)置音量
function setVol(num){
myVideo.volume = num;
}
//放大
function makeBig()
{
myVideo.width=560;
}
//縮小
function makeSmall()
{
myVideo.width=320;
}
//恢復(fù)
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
效果：
video也可以使用<source>標簽進行兼容性調(diào)試。代碼如下：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>
編解碼工具FFmpeg
FFmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計算機程序。采用LGPL或GPL許可證。它提供了錄制、轉(zhuǎn)換以及流化音視頻的完整解決方案。它包含了非常先進的音頻/視頻編解碼庫libavcodec，為了保證高可移植性和編解碼質(zhì)量，libavcodec里很多code都是從頭開發(fā)的。
ffmpeg官網(wǎng)下載windows版本。本文寫作時只是直接下載了已經(jīng)編譯好的ffmpeg.exe來進行相關(guān)操作，沒有涉及到ffmpeg在windows下的編
譯。首先在D盤創(chuàng)建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 即可完成轉(zhuǎn)換。
轉(zhuǎn)換需要一定的時間。
詳細教程請參照：FFmpeg快速入門
感謝大家的觀看，學(xué)習(xí)在于練習(xí)，希望大家多多練習(xí)！一起加油
