HTML5 audio与video

音频和视频处理

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

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

audio

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

 

（1）src():本地或服务端音频文件的地址

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

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

三个可选值：auto 对整个音频文件进行加载  默认值

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

<audio src="files/荣耀.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+'秒');
}

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

function duration(){
    alert(audio.duration+'秒')
}

（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("nowVol").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;
}

 

 

 video

标签属性：

<video src="files/mov_bbb.mp4" preload="auto" loop  poster="poster.png" width="400" height="350" 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.1;
}

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

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

 

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

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