• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
Abby_guguk 显示全部楼层 发表于 2021-10-26 14:13:52 |阅读模式 打印 上一主题 下一主题
现在在这个特殊的时代下: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>方案。现在我们来总结一下兼容性:

*IE9 “只有当用户安装了VP8的编解码器时”才能支持VP8。
‡Google Chrome 2011年公布 放弃H.264, 但是“还没兑现”。 可以看出现在主流的仍然是MP4(AVC),但是为相识决“开源阵营”对AVC的摇晃不定,可以选择利用video的多源方案,在AVC的底子上额外提供对webm或ogg的支持:
XML/HTML Code复制内容到剪贴板
       
  • <video poster="movie.jpg" controls>      
  •   <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>      
  •   <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>      
  •   <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>      
  •   <p>This is fallback content</p>      
  • </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复制内容到剪贴板
       
  • <video id="movie" width="320" height="240" preload controls>      
  •   <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />      
  •   <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />      
  •   <source src="pr6.mp4" />      
  •   <object width="320" height="240" type="application/x-shockwave-flash"      
  •     data="flowplayer-3.2.1.swf">      
  •     <param name="movie" value="flowplayer-3.2.1.swf" />      
  •     <param name="allowfullscreen" value="true" />      
  •     <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />      
  •     <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>      
  •   </object>      
  • </video>  

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作