HTML5媒体事件使用及兼容处理

本文主要是介绍HTML5媒体事件使用及兼容处理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在HTML4.01时候想插入音频,视频,必须借助flash

1. 视频音频了解

1.1. 主流的视频文件格式

1. MPEG-4: 通常以.mp4为扩展名
2. Flash视频: 通常以.flv为扩展名
3. Ogg: 通常以.ogv为扩展名
4. WebM: 通常以.webm为扩展名
5. 音频视频交错: 通常以.avi为扩展名

1.2 音频格式：

1. Ogg .ogg
2. MP3 .mp3
3. ACC .acc

1.3 编码器

音频和视频编码/解码是一种算法, 用来对于一段特定的视频或音频进行解码和编码,以便音频和视频能够播放,原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费的时间是无法忍受的, 如果不对其进行解码,就无法将编码后的数据重组为原始的媒体资源

1. 视频编解码器

1. H.264
2. VP8 (google开源)
3. Ogg Theora

2. 音频编解码器

1. AAC
2. MPEG-3
3. Ogg Vorbis

H.264: 别名MPEG-4, 由MPEG研发并于2003年标准化,

当然也有一些编解码器是受专利了保护的, 有一些这是免费的, 例如Ogg的Vorbis音频编解码器,Ogg的Theora视频编码器也是可以免费试用的, 而想使用H.264的话就需要支付相关费用了

2. 视频音频基本使用

// 视频
<video src="视频地址" controls></video>	
// 音频
<audio src="视频地址" controls></video>

3. Video 视频标签

3.1 Video 标签属性

1. src 视频url地址
2. width 设置播放器宽度
3. height 设置播放器高度
4. controls 向用户显示播放控件
5. autoplay 视频就绪自动播放
6. muted 视频静音
7. loop 播放完是否继续播放该视频，循环播放
8. poster 加载等待的画面图片
9. preload 是否需要预加载
10. autobuffer 设置为浏览器缓冲方式，不设置autoplay才有效

 <video 
        width="1000" 
        height="300" 
        src="./dy.mp4" 
        controls 
        Preload 
        Poster='../1.jpg'
  > 你的浏览器不支持 H5 Video 标签,请升级浏览器</video>

3.2. Video API方法

1. play() 开始播放视频

2. pause() 停止播放视频

3. load() 重新加载媒体(比如用source换资源了)

4. 全屏:

   webkit element.webkitRequestFullScreen();
   Firefox element.mozRequestFullScreen();
   W3C element.requestFullscreen();

5. 退出全屏：
   webkit document.webkitCancelFullScreen();
   Firefox document.mozCancelFullScreen();
   W3C document.exitFullscreen();

3.3. Video API属性

1. currentTime : 开始到播放现在所用的时间(单位是秒)
2. duration : 媒体总时间(只读)
3. volume : 0.0-1.0的音量相对值
4. muted : 是否静音 false /true
5. paused : 媒体是否暂停(只读)
6. ended : 媒体是否播放完毕(只读)
7. error : 媒体发生错误的时候，返回错误代码 (只读)
8. currentSrc : 以字符串的形式返回媒体地址(只读)
9. poster: 视频播放前的预览图片(可读写)
10. videoWidth, videoHeight: 视频实际的尺寸(只读)

btn.onclick = function () {
    box.innerHTML = `
        当前播放时间:${video.currentTime}<br/>
        总时间:${video.duration}<br/>
        音量:${video.volume}<br/>
        是否静音:${video.muted}<br/>
        是否暂停:${video.paused}<br/>
        是否播放完毕:${video.ended}<br/>
        是否发生错误:${video.error}<br/>
        地址:${video.currentSrc}`;
}

3.4 . 基本事件

1. onplay 视频播放时触发的事件
2. onpause 视频暂停时触发的事件
3. ontimeupdate 视频在播放时持续触发事件
4. onended 视频播放结束时触发的事件
5. canplay 视频加载完成 ，能播放的时候

video.onplay = function () {
    console.log('我播放了')
}
video.onpause = function () {
    console.log('我暂停了')
}
video.ontimeupdate = function () {
    console.log('我一直在播放')
}
video.onended = function () {
    console.log('我播放完了,你过来啦')
}

4. audio 音频标签

4.1 audio 标签属性

1. src 要播放的音频的 URL。
2. autoplay 自动播放
3. controls 向用户显示播放控件
4. loop 循环
5. preload 是否等加载完再播放
6. muted 静音

4.2. audio API属性

1. duration 音乐的总时间(只读)
2. currentTime 音乐当前时间(可读写)
3. volume: 0-1 的音量绝对值(可读写)
4. ended 音乐播是否播放完毕(只读)
5. play: 音乐播放(只读)
6. pause:音乐暂停(只读)
7. error: 媒体发生错误的时候,返回错误代码(只读)
8. currentSrc: 以字符串的形式返回媒体地址(只读)_

例子:

video.volume = 0.001;

play.onclick = function () {
    if (video.paused) {
        video.play();
        this.value = '暂停';
    } else {
        this.value = '播放';
        video.pause();
    }
};

video.ontimeupdate = nowTime;

video.oncanplay = function () {
    tolTime.value = time(video.duration);
    nowTime();
};

function nowTime() {
    curTime.value = time(video.currentTime);
    let n = video.currentTime / video.duration;
    let offset = n * (progress.offsetWidth - pro_bar.offsetWidth);
    pro_bar.style.left = offset + 'px';

    pro_bg.style.width = offset + 'px';
}

function time(cTime) {
    cTime = parseInt(cTime);
    let h = zero(Math.floor(cTime / 3600));
    let m = zero(Math.floor((cTime % 3600) / 60));
    let s = zero(Math.floor(cTime % 60));

    return h + ':' + m + ':' + s;
}

function zero(num) {
    if (num < 10) {
        return '0' + num;
    }

    return num;
}

pro_bar.ondragstart = function (e) {
    let x = e.clientX - this.offsetLeft;

    this.ondrag = this.ondragend = function (e) {
        console.log(e);
        let _left = e.clientX - x;
        if (_left <= 0) _left = 0;
        else if (
            _left >=
            progress.offsetWidth - pro_bar.offsetWidth
        )
            _left = progress.offsetWidth - pro_bar.offsetWidth;

        pro_bar.style.left = _left + 'px';
        pro_bg.style.width = _left + 'px';

        let proN =
            _left / (progress.offsetWidth - pro_bar.offsetWidth);
        window.video.currentTime = proN * video.duration;

        nowTime();
    };
};

5. 兼容处理

由于浏览器视频格式的编辑码器不一样,导致有兼容问题,这个时候W3C为了解决这个问题,

兼容处理使用source标签

5.1 视频兼容

<video>
	<source src="./dy.mp4" type="video/mp4">
	<source src="./dy.ogg" type="video/ogg">
    你的浏览器不支持video标签,<a href="./dy.map4">点击下载视频</a>
</video>

【video.js】

5.2 音频兼容

<audio>
	<source src="./dy.mp3" type="audio/mp4">
	<source src="./dy.ogg" type="audio/ogg">
    你的浏览器不支持audio标签,<a href="./dy.map3">点击下载音频</a>
</audio>

【audio.js】

这篇关于HTML5媒体事件使用及兼容处理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！