HTML5 音频 视频处理

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.οnlοad=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("视频播放完成");
}

ok ，视频和音频的分享就此结束，如果有兴趣的小伙伴可以自己做一个播放器了。

要相信自己哦!!!