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("视频播放完成")

}