6音頻和視頻處理
如果想在瀏覽器上播放視頻和音頻都是需要通過一些插件的支持（flash）
但是因爲瀏覽器和插件之間存在一些兼容性問題，所以
爲了解決這些問題，就推出了audio和video兩種新的屬性來作爲現在大多數瀏覽器處理音頻和視頻的標準方法，使其可以統一化，簡便化
1.Audio
<audio src="../files/榮耀.mp3" preload="metadata" controls="controls"></audio>
1.src():本地音頻文件的地址
2.controls：由瀏覽器提供的音頻控件。
3.Proload：預加載，讓文件預先緩衝，優化播放的速度
可選值：auto：對整個音頻文件進行加載（默認值）
Metadata：只加載文件的源數據（第一幀，播放的總時長，播放列表，不能進行快進）
None：取消默認值
<audio src="../files/榮耀.mp3" autoplay loop preload="auto" controls="controls"></audio>
Loop：循環播放，布爾類型，在標籤內使用時默認爲true，
Autoplay：自動播放，布爾類型，默認爲true
1.1：控制函數和常用屬性：
1.playOrpaused()：控制音頻的播放和暫停
由兩種方法組成
Play()--播放
paused()暫停
var audio;
window.onload=function(){
initAuto()//初始化audio
};
var initAuto = function(){
audio = document.getElementById("audio")//獲取audio
};
function playOrpaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML = "暫停";
return ;
}
audio.pause();
obj.innerHTML = "播放";
}
2.當前播放時長（單位：秒）
audio.currentTime
3.獲取音頻總時長
audio.duration
4.隱藏/顯示播放控件
function hiddenOrShowControls(obj){
if(audio.controls){
audio.removeAttribute("controls");
obj.innerHTML = '顯示';
return;
}
audio.controls = "controls";
obj.innerHTML = '隱藏';
}
5.可腳本控制的特性值
1.開啓或關閉靜音
布爾類型，當值爲true時，開啓靜音，值爲false時，關閉靜音。
function muted(obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = "開啓靜音"
}else{
audio.muted = true;
obj.innerHTML = "關閉靜音"
}
}
注意：以上函數當被調用時參數爲this，否則會報錯。
2.vol：通過改變函數中定義的volume的值來控制音量的大小，
Volume的取值範圍：[0,1],超出這個範圍就會報錯，不過我們可以使用try{ }catch(){ }把這個錯誤拋出異常。
視頻：
標籤屬性：
有些是和音頻具有相同的功能屬性
不同;
新屬性：
Poster：給視頻設置第一幀，也就是封面，括號內是文件的路徑
也可以給視頻設置width和height：高度和寬度
如果想在瀏覽器上播放視頻和音頻都是需要通過一些插件的支持（flash）
但是因爲瀏覽器和插件之間存在一些兼容性問題，所以
爲了解決這些問題，就推出了audio和video兩種新的屬性來作爲現在大多數瀏覽器處理音頻和視頻的標準方法，使其可以統一化，簡便化
1.Audio
<audio src="../files/榮耀.mp3" preload="metadata" controls="controls"></audio>
1.src():本地音頻文件的地址
2.controls：由瀏覽器提供的音頻控件。
3.Proload：預加載，讓文件預先緩衝，優化播放的速度
可選值：auto：對整個音頻文件進行加載（默認值）
Metadata：只加載文件的源數據（第一幀，播放的總時長，播放列表，不能進行快進）
None：取消默認值
<audio src="../files/榮耀.mp3" autoplay loop preload="auto" controls="controls"></audio>
Loop：循環播放，布爾類型，在標籤內使用時默認爲true，
Autoplay：自動播放，布爾類型，默認爲true
1.1：控制函數和常用屬性：
1.playOrpaused()：控制音頻的播放和暫停
由兩種方法組成
Play()--播放
paused()暫停
var audio;
window.onload=function(){
initAuto()//初始化audio
};
var initAuto = function(){
audio = document.getElementById("audio")//獲取audio
};
function playOrpaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML = "暫停";
return ;
}
audio.pause();
obj.innerHTML = "播放";
}
2.當前播放時長（單位：秒）
audio.currentTime
3.獲取音頻總時長
audio.duration
4.隱藏/顯示播放控件
function hiddenOrShowControls(obj){
if(audio.controls){
audio.removeAttribute("controls");
obj.innerHTML = '顯示';
return;
}
audio.controls = "controls";
obj.innerHTML = '隱藏';
}
5.可腳本控制的特性值
1.開啓或關閉靜音
布爾類型，當值爲true時，開啓靜音，值爲false時，關閉靜音。
function muted(obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = "開啓靜音"
}else{
audio.muted = true;
obj.innerHTML = "關閉靜音"
}
}
注意：以上函數當被調用時參數爲this，否則會報錯。
2.vol：通過改變函數中定義的volume的值來控制音量的大小，
Volume的取值範圍：[0,1],超出這個範圍就會報錯，不過我們可以使用try{ }catch(){ }把這個錯誤拋出異常。
視頻：
標籤屬性：
有些是和音頻具有相同的功能屬性
不同;
新屬性：
Poster：給視頻設置第一幀，也就是封面，括號內是文件的路徑
也可以給視頻設置width和height：高度和寬度
<video width="600px" height="150px" src="../files/mov_bbb.mp4" preload="auto" loop poster="../files/poster.png" controls="controls"></video>
2.視頻開始播放的位置（播放點）；
var video = document.getElementById("video");
function playBySeconds(){
video.currentTime = 5;
}
3.設置播放速度
function setPlaySpeed(){
video.playbackRate = 0.5;
}
通過改變playbadRate的值來設置
3.返回視頻的總時長：
function duration(){
alert(video.duration)
}
4.onended：當視頻播放完成之後出發的事件；
video.onended = function(){
alert("視頻播放完成");
}
2.視頻開始播放的位置（播放點）；
var video = document.getElementById("video");
function playBySeconds(){
video.currentTime = 5;
}
3.設置播放速度
function setPlaySpeed(){
video.playbackRate = 0.5;
}
通過改變playbadRate的值來設置
3.返回視頻的總時長：
function duration(){
alert(video.duration)
}
4.onended：當視頻播放完成之後出發的事件；
video.onended = function(){
alert("視頻播放完成");
}
ok ，視頻和音頻的分享就此結束，如果有興趣的小夥伴可以自己做一個播放器了。
要相信自己哦!!!