HTML5-音频和视频的处理

为什么会有audio/或者说video的出现是为了解决一些什么问题？

在H5之前，如果想在浏览器上播放视频音频的话都是需要通过一些插件的支持（如flash），但是因为浏览器和插件之间存在一些兼容性的问题，所以其了解决这些问题就推出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标 使其可以统一化、简洁化

1、audio

<audio src="荣耀.mp3" preload="metadata" controls="controls"></audio>

（1）  src（）：本地音频文件的地址，也可以引用外部资源

（2）  controls：由浏览器提供的音频控件

（3）  preload：预加载，让文件预先进行缓冲，优化播放速度。

三个可选值：

auto 对整个音频文件进行加载，默认值。

Metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）

<audio src="荣耀.mp3" autoplay loop controls="controls"></audio>

Loop：循环播放，布尔类型在标签内使用时默认为true。

Autoplay：自动播放，布尔类型在标签内使用是默认为true

控制函数和常用属性

（1）playOrPaused（）：控制音频的播放和暂停。

Play():播放

Pause():暂停

function playOrPaused(id, obj){
    if(audio.paused){
        audio.play();
        obj.innerHTML='暂停';
        return;
    }
    audio.pause();
    obj.innerHTML='播放';
}

（2）getCurrentTime():获取已播放的时长，或者说是播放了多长时间

function getCurrentTime(){
    alert(audio.currentTime+"s")
}

（3）duration():获取音频的总时长

function duration(){
    alert(audio.duration+"s")
}

（4）hideOrShowControls():对浏览器提供的音频控件隐藏或显示

function hideOrShowControls(obj){
    if(audio.controls){
        audio.removeAttribute("controls");
        obj.innerHTML= "显示";
        return;
    }
    audio.controls = "controls";
    obj.innerHTML= "隐藏"
}

可脚本控制的特性值

（1）muted():布尔类型，当它的值为true开启静音，值为false关闭静音。

function muted(obj) {
    if (audio.muted){
        audio.muted = false;
        obj.innerHTML= "开启静音"
    } else {
        audio.muted = true;
        obj.innerHTML= "关闭静音"
    }
}

（2）vol：通过改变函数中定义的volume的值来控制音量的大小

           volume范围：0.0-1.0  超出范围会报错。

function vol(type){
    if(type=='up'){//加音
        var volume= audio.volume+=0.1;
        if(volume>=1){
            volume=1;
        }
        audio.volume=volume;
    }else{
        var volume = audio.volume-=0.1;
        if(volume<=0){
            volume=0;
        }
        audio.volume=volume;
    }
    document.getElementById("newVol").innerHTML = round(audio.volume);
}

function round(value){
    //将音量的值转化为浮点数并四舍五入
    value = Math.round(parseFloat(value)*10)/10
    if(value.toString().indexOf(".")<0){
        value = value.toString()+".0";
    }
    return value;
}

2、 video

标签属性：

<video src="mov_bbb.mp4" preload="auto" loopposter="./poster.png" width="300" autoplay controls="controls"></video>

（1）  src（）：本地视频文件的地址，也可以使用

（2）  controls：由浏览器提供的视频控件

（3）  preload：预加载，让文件预先进行缓冲，优化播放速度。

三个可选值：

auto 对整个视频文件进行加载，默认值。

Metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）

（4）Loop：循环播放，布尔类型在标签内使用时默认为true。

（5）Autoplay：自动播放，布尔类型在标签内使用是默认为true

（6）poster():给视频设置第一帧（封面）。括号内，写图片的路径内容

（7）width、height ：设置视频的高度和宽度

常用的方法：

（1）  playBySeconds():通过currentTime的值设置视频开始的位置（播放点）

function playBySeconds(){
video.currentTime= 5;
}

（2）setPlaySpeed()：通过playbackRate的值设置视频播放的速度。

function setPlaySpeed(){
    video.playbackRate = 0.2;
}

（3）duration():返回视频总时长

function duration(){
    alert(video.duration);
}

（4）  onended：当视频播放完成后触发的事件

video.onended=function(){
    alert("视频播放完成")
}