HTML5音频和视频的处理

来源：互联网发布：火龙果软件杨秀峰编辑：程序博客网时间：2024/05/16 05:38

音频和视频的处理

为什么有audio？或者说audio的出现是为了解决什么样的问题？

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

1. audio

1) src();音频文件的地址，本地和网络地址都可以

2) contros;由浏览器提供的音频控件

3) preload;预加载，就是让文件进行预先缓冲，优化播放的速度。

三个可选值：

①auto:对整个音频事件进行加载默认值，

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

③none

Loop:循环播放，布尔类型在标签的使用中默认为true

Autoplay:自动播放，布尔类型在标签的使用中默认为true

1.1控制函数和常用的属性

（1）palyOrPaused();控制音频的播放和暂停

Play():播放

Pause():暂停

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls"></audio>

<a href="javascript:void (0);" onclick="playOrPaused('chrome',this)">暂停/播放</a>
</body>
<script>
    var audio;
    window.onload = function () {
            initAudio();    //初始化audio
    };
    var initAudio = function () {
        audio = document.getElementById("audio")
    };
    //播放和暂停
    function playOrPaused(id,obj) {
        if(audio.paused){   //暂停
            audio.play();
            obj.innerHTML ="暂停";
            return;
        }
        audio.pause();
        obj.innerHTML = "播放"
    }
</script>

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

//获取播放的时长
function getCurrentTime() {
alert(audio.currentTime+"秒");
}

（3）dration()：获取音频的总时长

//获取音频总时长
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.2 可脚本控制的特性值

（1）muted();是布尔类型当他的值为true时，开启静音；当他的值为false时，关闭静音。

//开启静音关闭静音
function muted(obj) {
    if(audio.muted){
        audio.muted =false;
        obj.innerHTML = "开启静音";
        return;
    }
    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;
}

2.viedo

2.1常用属性

1) src();音频文件的地址，本地和网络地址都可以

2) contros;由浏览器提供的音频控件

3) preload;预加载，就是让文件进行预先缓冲，优化播放的速度。

三个可选值：

①auto:对整个音频事件进行加载默认值，

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

③none

4)Loop:循环播放，布尔类型在标签的使用中默认为true

5)Autoplay:自动播放，布尔类型在标签的使用中默认为true

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

7)width、height :设置视频的宽度和高度

2.2常用的方法

（1）playBySeconds():设置视频开始播放的位置

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

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

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

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

function duration() {
alert(video.duration);
}
//视频播放完的触发事件
video.onended =function () {
alert("音频播放完成")
}

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

//视频播放完的触发事件
video.onended =function () {
alert("音频播放完成")
}

阅读全文

0 0