视频播放问题总结

最近一直在研究视频播放的问题，在研究过程中遇到很多问题，在这里总结一下遇到的问题和解决方法

关于视频文件类型

现在，视频文件可以大致分为两类：其一是 影像文件 ，比如说常见的VCD便是一例。其二是流式视频文件，比如说在线实况转播，就是构架在流式视频技术之上的。流式视频(Streaming Video)采用一种“边传边播”的方法，即先从服务器上下载一部分视频文件，形成视频流缓冲区后实时播放，同时继续下载，为接下来的播放做好准备。这种“边传边播”的方法避免了用户必须等待整个文件从Internet上全部下载完毕才能观看的缺点。

关于视频文件格式

目前主流的视频文件格式大致包括AVI、MPEG、WMV、MOV、RM、RMVB、ASF、FLV和FLASH等多种格式，现在主要介绍以下视频文件格式。

MPEG格式视频文件

它的英文全称为Moving Picture Expert Group，即运动图像专家组格式，家里常看的VCD、SVCD、DVD就是这种格式。MPEG文件格式是运动图像压缩算法的国际标准，它采用了有损压缩方法以减少运动图像中的冗余信息。MPEG的压缩方法说的更加深入一点就是保留相邻两幅画面绝大多数相同的部分，而把后续图像中和前面图像有冗余的部分去除，从而达到压缩的目的。目前MPEG格式有三个压缩标准，分别是MPEG-1、MPEG-2、和MPEG-4，另外，MPEG-7与MPEG-21仍处在研发阶段
　MPEG-1： 制定于1992年，它是针对1.5Mbps以下数据传输率的数字存储媒体运动图像及其伴音编码而设计的国际标准。也就是我们通常所见到的VCD制作格式。这种视频格式的文件扩展名包括.mpg、.mlv、.mpe、.mpeg及VCD光盘中的.dat文件等。
　MPEG-2：制定于1994年，设计目标为高级工业标准的图像质量以及更高的传输率。这种格式主要应用在DVD/SVCD的制作（压缩）方面，同时在一些HDTV（高清晰电视广播）和一些高要求视频编辑、处理上面也有相当的应用。这种视频格式的文件扩展名包括.mpg、.mpe、.mpeg、.m2v及DVD光盘上的.vob文件等。
　MPEG-4：制定于1998年，MPEG-4是为了播放流式媒体的高质量视频而专门设计的，它可利用很窄的带宽，通过帧重建技术，压缩和传输数据，以求使用最少的数据获得最佳的图像质量。MPEG-4最有吸引力的地方在于它能够保存接近于DVD画质的小体积视频文件。这种视频格式的文件扩展名包括.asf、.mov和DivX 、AVI等。
　

AVI格式视频文件

它的英文全称为Audio Video Interleaved，即音频视频交错格式。它于1992年被Microsoft公司推出，随Windows3.1一起被人们所认识和熟知。所谓“音频视频交错”，就是可以将视频和音频交织在一起进行同步播放。这种视频格式的优点是图像质量好，可以跨多个平台使用，但是其缺点是体积过于庞大，而且更加糟糕的是压缩标准不统一，因此经常会遇到高版本Windows媒体播放器播放不了采用早期编码编辑的AVI格式视频，而低版本Windows媒体播放器又播放不了采用最新编码编辑的AVI格式视频。

MOV格式

　　美国Apple公司开发的一种视频格式，默认的播放器是苹果的QuickTimePlayer。具有较高的压缩比率和较完美的视频清晰度等特点，但是其最大的特点还是跨平台性，即不仅能支持MacOS，同样也能支持Windows系列。
　　

关于视频播放

视频播放相关标签

在最开始的时候我们使用embed标签来嵌入插件的方式来播放的，其会调用系统上的原生播放器，如windows上的 media player，mac上的quick time等。
使用该标签方法很简单，src属性表示视频的播放路径。也可以为该标签添加一些属性控制播放器的样式，如autostart(是否自动播放)、loop(是否循环播放)、hidden（控制面板是否显示）、starttime（开始时间）、音量大小（volume）、对齐方式（align）等

<embed src="your.mp4">

这样做的缺点就是这块区域完全是黑盒，没有播放或暂定等的回调函数，无法和播放器进行通信。

object标签定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。object标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

使用object播放Flash的代码如下

<object id="flowplayer" width="704" height="400" data="media/flowplayer-3.2.16.swf" type="application/x-shockwave-flash">        <param name="movie" value="media/flowplayer-3.2.16.swf" />         <param name="flashvars" value='config={"clip":"media/beach.mp4"}' />    </object>

video标签是HTML5新增的标签，用于在HTML或者XHTML文档中嵌入视频内容。各浏览器的兼容性如下：

为了保证不同格式的视频正常播放，HTML5中新增了source标签，用来引入不同格式的视频资源。另外，为了适配不同的视频字幕，HTML5新增了track标签用来显示字幕。主要用法如下

<video id="video1" width="420" style="margin-top:15px;">      <source src="./test.mp4" type="video/mp4" />      <source src="./test.webm" type="video/webM" />      <source src="./test.ogv" type="video/ogg" />      <track src="./butterfly.vtt" srclang="en" kind="subtitles" label="English" default>    <track src="./butterfly_fr.vtt" srclang="fr" kind="subtitles" label="Chinese">    <p>您的浏览器不支持此HTML5标签</p>  </video>  

浏览器会最先尝试播放第一个视频，如果发现不支持会播放第二个，依次类推直到找到一个可以播放的，或者全部能播放，如果浏览器不支持video标签，则显示p标签中的内容

video标签具有一些常用属性，比如autoplay（视频是否自动播放）、controls（向用户显示控件条）、loop（是否循环播放）、preload（是否预加载）、src（要播放的视频url）等

video作为媒体对象，封装了很多属性和方法
设有一个video元素

<video src="./test.mp4" autoplay controls id="video-test">   浏览器不支持该标签</video>

其常用的属性如下

• currentTime： 当前播放的位置，为该属性赋值可改变播放位置
• startTime： 视频播放的开始位置，一般为0。如果为流媒体或者不从0开始的视频资源，则不为0
• duration： 当前播放资源你的长度，如果为流媒体。则返回无限
• paused： 当前资源是否暂停
• playbackRate： 当前播放速度，为该属性赋值可改变播放速度
• ended：资源是否已经播放结束
• autoPlay：是否自动播放
• buffered：返回以缓冲的区域
• prelaod：是否预加载
• currentSrc：返回当前资源的URL

• error：若为null表示没有错误。error.code（1代表用户终止 2代表网络错误 3表示解码错误 4表示url无效）

  常用方法如下：

• play()：播放该资源

• pause()：暂停资源播放
• canPlayType(type)：是否能播放type格式的资源（返回值有maybe和空字符串）

• load()：重新加载src指定的资源

  常用事件如下：

• loadstart：客户端开始请求数据

• durationchange：资源长度改变
• loadedmetadata ：指定的音频/视频的元数据已加载
• loadeddata：当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧
• progress：浏览器正在下载指定的音频/视频
• canplay：浏览器能够开始播放指定的音频/视频
• play：播放指定的音频/视频
• ratechange：播放速度变化
• volumechange：音量改变

var videoCont = document.getElementById('video-test');    console.log('是否支持mp4:' + videoCont.canPlayType('video/mp4'));//maybe    console.log('当前播放视频路径:' + videoCont.src);    videoCont.addEventListener('loadstart',function(e){        console.log('loadstart客户端开始请求数据');    },false)    videoCont.addEventListener('durationchange',function(e){        console.log('durationchange资源长度改变');    },false)    videoCont.addEventListener('loadedmetadata',function(e){        console.log('loadedmetadata指定的音频/视频的元数据已加载');    },false)    videoCont.addEventListener('loadeddata',function(e){        console.log('loadeddata当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧');    },false)    videoCont.addEventListener('progress',function(e){        console.log('progress浏览器正在下载指定的音频/视频');    },false)    videoCont.addEventListener('canplay',function(e){        console.log('canplay浏览器能够开始播放指定的音频/视频');    },false)    videoCont.addEventListener('play',function(e){        console.log('play播放指定的音频/视频');        consoloe.log('视频时长为' + videoCont.duration + '秒')        videoCont.playbackRate = 2;//设置播放速度    },false)    videoCont.addEventListener('ratechange',function(e){        console.log('ratechange播放速度变化为' + videoCont.playbackRate);    },false)    videoCont.addEventListener('volumechange',function(e){        console.log('volumechange音量改变为：' + videoCont.volume );    },false)

输出结果如下

由结果可以看出，视频加载时各事件的执行顺序如下

1. loadstart
2. durationchange
3. loadedmetadata
4. progress
5. loadeddata
6. canplay

视频播放的兼容性处理

下面提供一种兼容的方案，该方案首先尝试是否支持video标签，如果不支持video标签，则会尝试flash播放

<video controls width="704" height="400">    <source src="media/beach.mp4" type="video/mp4">    <source src="media/beach.webm" type="video/webm">    <object id="flowplayer" width="704" height="400" data="flowplayer-3.2.16.swf" type="application/x-shockwave-flash">        <param name="movie" value="flowplayer-3.2.16.swf" />         <param name="flashvars" value='config={"clip":"media/beach.mp4"}' />    </object></video>

另外，可以通过js代码判断浏览器是否安装flash，如果浏览器未安装flash，提示用户安装flash插件，以便用户正常观看视频
检测浏览器是否安装flash的方法如下

function flashChecker() {    var hasFlash = false;    try {        hasFlash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));    } catch(exception) {        hasFlash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);    }    return hasFlash}//判断是否安装flash,若未安装，则提示用户安装flashif(!flashChecker()){    Modal.warning({        title: '视频播放出错',        okText: '去下载',        content: <div className="approval-modal-cont">            <p>您还未安装flash，                <a href="//www.adobe.com/go/getflash" target="_blank">请前往下载</a>            </p>            <p>请确保浏览器允许运行flash</p>        </div>,        onOk(){            setTimeout(function(){                window.open('//www.adobe.com/go/getflash')            },500)        }    });}

参考文献
HTML5视频的那些事儿
常用视频格式与视频编解码标准介绍
使用html5进行视频播放 （一）
使用html5进行视频播放 （二）