html实现视频播放,网页视频播放器html5

　　如今，在这个特殊的时代：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和MIME类型的视频/webm。音频方面，可以用Vorbis/Opus。从兼容性来看，Chrome、Firefox、Opera对VP8的兼容性相当好，但Safari、IE几乎不支持。

　　开源的OggOgg和WebM差不多，都是开源的，在开源平台上得到广泛支持。它的视频编码方案叫做Theora(由Xiph.org基金会从VP3发展而来，可用于任何包格式)，音频是Vorbis。后缀通常是。ogv或者。ogg，而MIME类型是video/ogg。兼容性方面，Chrome、Firefox、Opera都可以支持(但Opera在移动平台上支持不了)，Safari、IE几乎支持不了。

　　Html5方案以上讨论的大前提其实是：基于Html5的视频方案。现在我们来总结一下兼容性：

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

　　谷歌Chrome在2011年宣布放弃H.264，但“还没有交付”。可以看出现在MP4(AVC)仍然是主流，但是为了解决“开源阵营”对AVC的动摇，你可以选择使用视频的多源方案，在AVC的基础上对webm或者ogg提供额外的支持：

　　XML/HTML代码将内容复制到剪贴板videoposter= movie.jpg 控件source src= movie . webm type= video/webm；编解码器=vp8.0，vorbis sources RC= movie . ogg type= video/ogg；codecs=theora，vorbis sources RC= movie . MP4 type= video/MP4；编解码器= avc1.4d401e，mp4a . 40.2 pthisfallbackcontent/p/video浏览器会根据自己的喜好选择加载流媒体文件的格式。当然，服务器必须为同一视频提供多种格式的支持。具体来说，您可以这样做：

　　提供WebM的视频版本(VP8 Vorbis)

　　提供MP4的视频版本(H.264 AAC(低复杂度))

　　Ogg版本可用(Theora Vorbis)

　　服务器推荐Nginx，尽量注意MIME类型的正确配置。

　　010-5900在html5普及之前，常见的视频播放方案是flash和flv(flash从9开始支持h.264的mp4)。然而，随着ios设备的普及，flash不再是万能的。越来越多的视频网站提供多样化的解决方案，他们更倾向于html5:也就是说，是使用视频还是flash是通过检查agent是否支持html5来决定的。面对IE8以下的浏览器，flash几乎是唯一的选择(silverlight的接受度普遍不高)。

　　当然，flash和flv的方案有很多种实现方式，我能想到的有以下两种：

　　根据代理的类型，服务器输出不同的html。如果支持html5，则输出视频mp4(avc)和webm(或ogg)，否则输出flash相关的标签或脚本。

　　使用html5shiv和html5-video是IE也可以支持视频标签，并且使用Flash player代替原生视频播放。

　　在视频中嵌入对象：

　　XML/HTML代码将内容复制到剪贴板video id= movie width= 320 height= 240 预加载控件source src= pr6 . webm type= video/webm；编解码器=vp8，vorbis /sources RC= pr6 . ogv type= video/ogg；编解码器=theora，vorbis /sources RC= pr6 . MP4 /object width= 320 height= 240 type= application/x-shock wave-flash data= flow player-3 . 2 . 1 . swf param name= movie value= flow player-3 . 2 . 1 . swf /param name= allow full screen value= true /param name= flash vars value= config={ clip :{ URL : 333

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。