浅谈基于HTML5的在线视频播放方案


Posted in HTML / CSS onFebruary 18, 2016

如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战…这些都导致web开发者在设计视频解决方案的时候相当困惑。本文围绕这个主题,来探讨一下相关的技术,原理和工具。

编码与格式的误区
很多人将编码和格式误认为是同一个东西,往往以视频文件的后缀来唯一确定视频文件的支持程度。而事实上,用一句话来概括就是:视频的文件后缀(假设没有恶意修改后缀)实际上代表一种封装格式,而视频或者音频的编码算法与封装格式本身无直接的关系:同样的封装格式(即同样的后缀)可以封装不同编码算法的视频和音频。而视频播放设备或软件是否支持视频的播放,不仅仅要看封装格式,还要看编码算法。认清这一点是理解和排查问题的基础。

封装格式规定了视频的所有内容,包括图像,声音,字幕,系统控制等,其中以图像和声音最为关键。

从MPEG说起
MPEG是一个定义视频规格的国际组织,他们曾经推出的MPEG-1和MPEG-2实际上分别就是大家熟知的VCD和DVD,不过这都是远古的东西了。我们来看看跟本文主题有关的MPEG-4规范。

MPEG-4规范规定了文件后缀名为.mp4,目前包括三种图像编码和压缩算法:Xvid\DivX\AVC(H.264),其中Xvid和DivX也可以统称为MPEG-4 Part 2或者MPEG-4 Visual,而更为知名的H.264和AVC是相同的概念。音频方面则是AAC。以下关于兼容的内容,来源于维基百科和格式工厂以及笔者的测试:

Android浏览器:支持DivX和AVC,Xvid应该不支持
iPhone和iPad(iOS):支持DivX和AVC,Xvid不支持
Chrome:支持AVC,不支持DivX和Xvid。谷歌曾在2011年初宣布由于许可问题,将移除Chrome浏览器对AVC(H.264)的支持。但是直到目前的版本,AVC还在被支持。另外,实际测试下来,如果是DivX和AAC封装在mp4中的话,chrome可以播放,但是只有声音(AAC)。
Firefox和Opera:还是由于许可的问题,Firefox和Opera逐渐动摇了对AVC的支持,笔者在最新的Firefox中测试AVC仍然可以播放(维基百科的解释是可能与系统本身具有解码器有关);至于DivX和Xvid,笔者在Firefox下的测试结果是不支持。从维基百科的兼容列表看,Opera对AVC支持的不好。
IE:笔者的IE11能够支持AVC,不支持DivX和Xvid
WebM的倡导
由于AVC(H.264)的授权问题,以Chrome、Firefox、Opera为首的开源阵营开始动摇对AVC的支持,尽管目前这些浏览器仍然能够支持AVC,但是它们也倾向于一个叫做WebM的开源多媒体项目,该项目包括一个叫VP8的新的开源视频编解码方案。目前VP8已经发展到了VP9。作为封装格式的WebM具有.webm的后缀和video/webm的MIME类型。在音频方面,可以使用Vorbis/Opus。从兼容性看,Chrome、Firefox、Opera对VP8的兼容性相当理想,但是Safari和IE几乎无法支持。

开源的Ogg
Ogg几乎与WebM相同,开源,被广泛的在开源平台支持。其视频编码方案称为Theora(有VP3发展而来,由Xiph.org基金会开发,可被用于任何封装格式),音频为Vorbis。后缀通常为.ogv或.ogg,MIME类型为video/ogg。在兼容性上,Chrome、Firefox、Opera能够支持(但是Opera在移动平台上无法支持),但是Safari和IE几乎无法支持。

Html5方案
以上的讨论实际上的大前提是:视频基于Html5的<video>方案。现在我们来总结一下兼容性:
浅谈基于HTML5的在线视频播放方案

*IE9 “只有当用户安装了VP8的编解码器时”才能支持VP8。

‡Google Chrome 2011年宣布 放弃H.264, 但是“还没兑现”。 可以看出现在主流的仍然是MP4(AVC),但是为了解决“开源阵营”对AVC的摇摆不定,可以选择利用video的多源方案,在AVC的基础上额外提供对webm或ogg的支持:

XML/HTML Code复制内容到剪贴板
  1. <video poster="movie.jpg" controls>  
  2.   <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>  
  3.   <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>  
  4.   <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>  
  5.   <p>This is fallback content</p>  
  6. </video>  

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件,当然服务端必须对同一个视频提供多种格式的支持,具体可以这么做:

提供一个WebM的视频版本(VP8+Vorbis)
提供一个MP4的视频版本(H.264+AAC(low complexity))
提供Ogg版本(Theora+Vorbis)
服务端推荐使用nginx,尽量注意MIME类型的配置正确

旧版本的IE和flash
在html5流行之前,通用的视频播放解决方案是flash和flv(flash从9开始支持h.264的mp4)。但是随着ios设备的流行,flash已经不是万能药了,越来越多的视频网站提供多元的解决方案,而且偏向于html5:也就是说,通过检测agent是否支持html5来决定使用video还是flash。在面对IE8以下的浏览器时,flash几乎是唯一的选择(silverlight的接受度普遍不高)。

当然针对flash和flv的方案,也有多种实现方法,笔者能够想到的有如下两种:

服务端根据agent的类型,输出不同的html,如果支持html5就输出video+mp4(avc)和webm(或者ogg),否则输出flash相关的标签或脚本
使用html5shiv和html5-video是IE也能够支持video标签,并且使用Flash播放器来代替原生的video播放。
将object内嵌在video中:

XML/HTML Code复制内容到剪贴板
  1. <video id="movie" width="320" height="240" preload controls>  
  2.   <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />  
  3.   <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />  
  4.   <source src="pr6.mp4" />  
  5.   <object width="320" height="240" type="application/x-shockwave-flash"  
  6.     data="flowplayer-3.2.1.swf">  
  7.     <param name="movie" value="flowplayer-3.2.1.swf" />  
  8.     <param name="allowfullscreen" value="true" />  
  9.     <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />  
  10.     <p>Download video as <a href="pr6.mp4">MP4</a><a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>  
  11.   </object>  
  12. </video>  
HTML / CSS 相关文章推荐
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 #HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 #HTML / CSS
HTML5实现预览本地图片
Feb 17 #HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 #HTML / CSS
HTML5未来发展趋势
Feb 01 #HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 #HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 #HTML / CSS
You might like
文章推荐系统(三)
2006/10/09 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
详解Python with/as使用说明
2018/12/13 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
关于运动会广播稿300字
2014/10/05 职场文书
北京颐和园导游词
2015/01/30 职场文书
培训讲师开场白
2015/06/01 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python