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 = `
        当前播放时间:${