HTML5音视频标签介绍和使用

HTML5音视频

内容未整合完成，持续更新中…

• 文章介绍内容：

  • audio/video音视频标签及常用属性
  • 音视频标签API事件
  • 自定义播放器
  • 第三方框架的使用（jquery等封装的）

• 使用场景：网站的多媒体播放器

• 背景：较早的多媒体网站使用的是flash，是第三方的插件，不仅不安全而且成本较高

• 关于HTML5和flash播放器的优缺点，这篇文章写得还可以：
  HTML5和flash播放器的优缺点对比

video

支持的三种常见格式：mp4、webm、ogv

各个浏览器差异

• safari只支持mp4
• IE8（包含）以下不支持video标签
• IE9支持video、但是只支持mp4
• 欧朋、火狐、谷歌支持mp4、webm、ogv

怎样解决浏览器兼容问题？写法：

// 方法一，如果不支持的话，提示用户换浏览器


// 方法二，用video下的source标签，如果浏览器对第一个source不兼容，那么会依次往下查找，直到兼容为止

标签属性

• src：视频连接
• width：视频宽度
• height：视频高度（width和height如果同时使用，播放器会拉伸，播放器会根据视频比例自适应，播放的内容不会拉伸，始终在中心位置）
• controls：控制器
• autoplay：自动播放，但是chrome下不会自动播放（如果有muted静音属性，chrome可以自动播放）
• loop：循环播放，-1：无限轮播，2：轮播2次
• poster：视频封面，未播放时候显示的图片，只有第一次加载时候才显示的图片，默认显示的是视频的第一帧
• muted：静音播放

API

• play()：控制video标签，让其自动播放，但是在chrome下，不允许自动带声音的播放，chrome可以支持7s以内的视频自动播放

• pause()：和play一个用法

• duration：视频的长度，单位毫秒，VideoNode.duration即可获得

• currentTime：设置或者返回视频当前的一个播放长度，单位秒，可以结合用来设置快进功能

• src：设置或返回视频的链接地址

• volume：设置或返回视频的音量，范围0-1

• controls：设置控制台是否显示

• muted：设置是否静音，但是muted属性不会在标签显示

• networkState：返回网络或者资源加载状态

• networkState状态码：

  • 0：未初始化
  • 1：视频已经选好资源，但是未使用网络
  • 2：浏览器正在下载视频资源，边下边播
  • 3：未找到视频资源 ，在一开始的情况下 因为video 不会立即找到资源 所以也会以出现3

• currentSrc：返回音视频的地址，必须是在音视频可以加载播放的时候才会返回，不可以赋值

• ended：返回音视频是否播放结束，如果播放结束返回true，否则返回false，可以进行事件监听：

	videoNode.addEventListener("ended",function(){
    	console.log('视频结束')
    })

• playbackRate：设置或者返回音频的播放速度，默认1

• readyState：返回当前视频的就绪状态

• readyState状态码：

  • 0：未就绪
  • 1：有数据，但是不足以支撑
  • 2：当前数据是可以用，但是下一帧没有
  • 3：数据正在缓冲 当前及下一帧至少是可用了
  • 4：可用数据足已开始播放

• timeupdate：当目前的播放位置已更改时，可以添加监听事件，可以根据这个自行开发个进度条

	VideoNode.addEventListener('timeupdate', function(){
    	console.log(this.currentTime)
    })

• seeked：当用户对视频进度条完成操作时候会触发的事件，拖动停止的时候触发，使用的时候必须用ON

	videoNode.onseeked = function(){
    	console.log("seeked...")
    }

• seeking：当用户拖动进度条时候就会触发事件，和seeked不同的是，一个拖动时候触发，一个拖动停止的时候触发

• volumeChange：当视频的声音发生改变时候，就会触发的时间，还是要必须用ON

• RequestFullScreen：全屏，但是必须在用户事件中调用（click等），但是不同浏览器不兼容，兼容方案：

	button.onclick = function(){
    	if(VideoNode.webkitRequestFullscreen){
        	VideoNode.webkitReqeustFullscreen();
        }else if(VideoNode.mozRequestFullScreen){
        	VideoNode.mozRequestFullScreen();
        }
    }