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

2023-10-03 17:11:46

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

1. 视频音频了解

1.1. 主流的视频文件格式

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

1.2 音频格式：

Ogg .ogg
MP3 .mp3
ACC .acc

1.3 编码器

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

1. 视频编解码器

H.264
VP8 (google开源)
Ogg Theora

2. 音频编解码器

AAC
MPEG-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 标签属性

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

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

3.2. Video API方法

play() 开始播放视频
pause() 停止播放视频
load() 重新加载媒体(比如用source换资源了)
全屏:

webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen();
退出全屏：
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();

3.3. Video API属性

currentTime : 开始到播放现在所用的时间(单位是秒)
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音 false /true
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
poster: 视频播放前的预览图片(可读写)
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 . 基本事件

onplay 视频播放时触发的事件
onpause 视频暂停时触发的事件
ontimeupdate 视频在播放时持续触发事件
onended 视频播放结束时触发的事件
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 标签属性

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

4.2. audio API属性

duration 音乐的总时间(只读)
currentTime 音乐当前时间(可读写)
volume: 0-1 的音量绝对值(可读写)
ended 音乐播是否播放完毕(只读)
play: 音乐播放(只读)
pause:音乐暂停(只读)
error: 媒体发生错误的时候,返回错误代码(只读)
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】

码农公寓