[转载]让Chrome的HTML5 video/audio tag支持更多种音视频

随着HTML5的发展,今后会有越来越多的应用程序基于HTML5开发,多媒体应用程序也不例外,HTML5新增加的video/audio tag提供了在网页中直接播放音视频的能力而无需借助任何插件,因此可以用HTML5开发一个媒体播放器,网上也已经出现了不少HTML5播放器例如jPlayer。但目前各家浏览器支持的HTML5音视频格式种类很有限,比如IE9只支持H.264Firefox只支持VP8TheoraGoogle Chrome算是支持格式最全的,支持的视频格式包括H.264VP8Theora,音频包括VorbisMP3AACWAV。这些格式对于播放网络在线音视频(不算flash)基本上足够了,但如果我们想播放本地音视频就会遇到很多不支持的格式,比如在中国很流行的rmvb视频,高清影片最常见的mkvavi格式,这些格式目前所有浏览器都不支持,仅仅从这一点来看,目前基于HTML5的播放器还不可能代替象QQ影音、射手播放器这样的传统播放器。

有没有可能自己给浏览器增加支持更多的音视频格式?分析Google开源浏览器Chromium后得知它的音视频解码是由FFmpeg提供的(代码在third_partyffmpeg),Chrome也是这样,所以完全可以给Chrome增加支持更多种类的音视频格式。

Chrome中的媒体播放架构如下图所示:

[转载]让Chrome的HTML5 <wbr>video/audio <wbr>tag支持更多种音视频

其中PipelineGoogleChrome开发的媒体框架引擎,HTML5 video/audio tag就是由这个引擎实现媒体播放的,FFmpeg在其中提供demuxerdecoder,因此要增加支持音视频格式主要修改FFmpeg就可以了。

Chromium的源码third_partyffmpegchromiumconfigChromelinuxia32config.h可以得知Chrome采用的FFmpeg的配置选项,在原有的配置选项后面添加如下选项:

--enable-decoder='rv10,rv20,rv30,rv40,cook,h263,h263i,mpeg4,msmpeg4v1,msmpeg4v2,msmpeg4v3,amrnb,amrwb,ac3,flv' --enable-demuxer='rm,mpegvideo,avi,avisynth,h263,aac,amr,ac3,flv,mpegts,mpegtsraw' --enable-parser='mpegvideo,rv30,rv40,h263,mpeg4video,ac3'

用新的配置选项重新配置和编译FFmpeg,用生成的3个动态链接库avcodec-54.dllavformat-54.dllavutil-51.dll替换掉Chrome里面原来的,要注意用来编译FFmpegChromium源码的版本要跟Chrome差不多,相差太大的话替换库后可能会造成Chrome无法正常运行。在Windows上编译FFmpeg的方法参见本人的另一篇文档《在Windows上编译Chromium中的FFmpeg》。

这样修改FFmpeg后在Chrome中用HTML5 video/audio tag就可以播放更多格式的音视频了,大部分常见的mkvaviflvmovamr都可以播放了。但是rmvb仍然无法播放,用Visual Studio 2010跟踪后找到了原因,原来常见的rmvb电影视频编码是RV40,音频编码是COOK,这两种codec类型在Chrome中都未被定义,在解析rmvb的时候会认为是未知的codec类型(kUnknownVideoCodeckUnknownAudioCodec),为此需要修改mediabasevideo_decoder_config.hmediabaseaudio_decoder_config.h分别在里面的枚举类型VideoCodecAudioCodec中增添这两种格式,然后还要修改mediaffmpegffmpeg_common.cc,具体修改方法就不赘述了,一看代码就知道。这样修改以后Chrome的媒体引擎就可以识别RV40COOK这两种格式了,常见的rmvb电影也可以播放了。

可见要让Chrome能播放更多格式的音视频其实不难,当然目前只是第一步,还有不少问题,比如播放rmvb电影时一拖动进度条屏幕显示就乱了,要想把兼容性和稳定性做好就要下更多功夫了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值