HTML 5多媒体技术开发疑难解答

日期: 2012-08-16 来源:TechTarget中国 英文

  目前,HTML5的势头不可阻挡,其中程序员和开发者都十分关心其中的HTML 5中的多媒体的相关方面知识,不少程序员和用户都对其中提出了不少问题,在本文中,将着重就HTML5中多媒体(音频,视频)中读者关心的问题进行了解答,并提出了注意事项。

  浏览器支持

  开发者最多的问题在于,HTML5的多媒体目前支持哪些浏览器呢?下面来给大家复习下:

  音频

  Firefox支持Ogg Vorbis和WAV

  Opera支持Ogg Vorbis和WAV

  Safari支持MP3,AAC格式 ,和MP4

  Chrome支持Ogg Vorbis,MP3,WAV,AAC和MP4

  Internet Explorer 9+支持MP3,AAC格式 ,和MP4

  IOS支持MP3,AAC格式 ,和MP4

  Android支持AAC和MP3

  为了最大程度支持所有上面提到的浏览器,建议开发者使用Ogg Vorbis和MP3这两种格式例如。

<audio controls>
   <source src=”myAudio.ogg” type=”audio/ogg”>
   <source src=”myAudio.mp3″ type=”audio/mp3″>
</audio>

  video

  Firefox支持Ogg Theora格式和WEBM

  Opera支持Ogg Theora格式和WEBM

  Safari浏览器支持MP4

  Chrome支持Ogg Theora格式,MP4和WEBM

  Internet Explorer 9支持MP4和WEBM(需要安装插件)

  IOS支持MP4

  Android支持MP4和WEBM(Android 2.3版本以上)

  为了支持上述所有的浏览器,建议使用WebM和MP4视频文件作为source元素。例如。

<video controls>
   <source src=”myVideo.mp4″ type=”video/mp4″>
   <source src=”myVideo.webm” type=”video/webm”>
</video>

  MIME类型:

  即使对浏览器来说,已经设置了正确的媒体,但有可能是您的服务器并不能正确识别多媒体的MIME类型。MIME类型告诉服务器如何处理不同的文件类型。如果你使用Apache,则可以在.htaccess文件中添加下面的音频支持:
  AddType audio/ogg ogg AddType audio/ogg oga AddType audio/wav wav AddType audio/mpeg mp3 AddType audio/mp4 mp4 AddType audio/mp4 mpa

  类似地添加如下代码,以支持视频:

  AddType video/webm webm AddType video/mp4 mp4 AddType video/ogg ogg AddType video/ogg ogv

  如果不能访问服务器的.htaccess文件,则有可能在服务器的控制面板地方有一个选项,允许查看和添加MIME类型。

  如果是Windows服务器,那么可能需要在IIS或者web.config中进行设置在web.config文件中 。

  文件格式转换的问题

  一种很常见的情况是,用户从客户端提交给服务端一个类型的媒体文件,并且尽管你已经从它的文件扩展名中确认了其MIME类型。但是,该文件没有被正确解码。例如,它可以是一个完全有效的MP4文件,但由于某种原因,在一些浏览器中无法播放。如果发生这种情况,最好把用户上传的文件进行编码,比如使用如Miro Video Coverter和Media Converter等编码器,可以确保正确的编码。

  此外,一些文件,尤其是MP4文件,在测试时,不要总是在一个支持其格式的浏览器中进行测试,这是因为事实上,MP4存在不同的编码格式,可以根据不同格式对MP4(又称如H.264)进行编码(参考:http://en.wikipedia.org/wiki/H.264#Profiles)如果有的浏览器不支持其中的编码格式,那么它自然不会工作。如果遇到这种情况,尝试确保该文件是以最基本的MP4编码方式进行编码。最好建议使用工具,比如Miro转换工具,它能确保MP4文件能在最多的浏览器中得到支持。

  如果需要支持Firefox 3.6和更低的版本,还需要转换对应的音频文件为Ogg格式},并将它们添加到中的元素中。

  在MP4完整下载前进行播放

  一般情况下,HTML5的的音频和视频播放器将允许用户在完整下载文件前,就可以开始进行播放了,有时候,对于MP4文件来说却不能这样,要必须等待所有的视频下载完毕再播放,这主要是编码问题造成的

  有时,MP4文件使用索引进行了编码(其中包含了比如文件长度等信息),往往这些信息是放在文件的尾部而不是头部。索引信息中,包含了文件的元信息,浏览器根据这些元信息去进行下载。如果索引放在后面的话,则必须等待到获得整个文件的索引后,才能知道文件的元信息,所以就必须等到整个文件下载完毕才能开始播放了。

  如果您遇到这种情况,还有一个简单的修补程序,是由埃里克森Renaun提供的,下载地址为:http://renaun.com/blog/code/qtindexswapper/,下载到计算机上运行,则可以把文件的索引信息移动到文件头并保存

  正确访问属性

  这个问题看上去好像有点多余,但每次在Stack Overflow中,都会看到很多开发者发问,比如为什么某个方法不能运行,原因在于他们使用了不存在的属性。比如,在<audio>和<video>标签中都有的旧的属性autobuffer,在2010年10月已经被preload取代了。

  人们似乎忘记了,HTML5是尚未敲定的标准(虽然它的大部分内容现在已经都相当稳定),所以作为开发者,必须多到W3C的官方网站去进行查阅相关资料。

  Firefox 11以上版本的音量控制的问题

  最近相信不少开发者会发现音量控制的操作在Firefox 11及以上的版本中被取消了。是的,静音和音量控制仍然是可以使用的,但要通过键盘上的上和向下键进行控制,其原因主要是发现了两个bug(请参考:http://www.iandevlin.com/blog/2012/04/html5/html5-media-controls-and-firefox),这一点请开发者注意,估计firefox会很快修复这个问题。

  插件依然不能完全避免

  HTML5的音频和视频点的最大卖点之一就是不需要安装第三方插件-例如Flash

  不幸的是,这不完全正确,ie 9及以上版本的浏览器和Safari是需要使用Microsoft Media Player和Apple的QuickTime,才能播放HTML5音频和视频。

  关于全屏视频的支持

  HTML5视频的其中一大威力在于其全屏播放的特性但HTML5规范中,对这个居然没有任何提及,相反,在另外一个关于全屏幕播放的API中有定义,但还是在草稿阶段,在一些浏览器中开始有试验性的支持。

  以下浏览器去一些支持全屏API,但具体使用的api方法各自有不同

  Chrome 19 版本以上

  Firefox的12 +

  Safari浏览器5.1 +

  也有一些其他方法,能在其他浏览器中支持使用全屏API,比如https://github.com/sindresorhus/screenfull.js

  Internet Explorer9 以上版本忽略了video poster属性

  如果在HTML 5的video标签中使用poster属性,其含义为在视频播放前提供一张静态的图片给用户,但ie 9以上的版本,除非设置了preload属性为none,否则将会忽略掉设置的poster属性。

  这是由于Internet Explorer是最迟支持HTML 5的浏览器,我们都习惯了其他浏览器中,如果设置了poster属性,则会在播放视频前,先显示设置的这张图片。但IE 9并不这样做,如果要播放的视频的第一帧已经加载了,则不会显示有poster属性指定的图片了,而且在IE 10中,目前依然存在这个问题。

  访问摄像头和麦克风

  HTML 5的起草者们,一直都希望HTML 5能访问摄像头和麦克风,因此早期是使用标签的,但现在是被getUserMedia API所取代了(详见: http://dev.w3.org/2011/webrtc/editor/getusermedia.html)。

  API本身是容易使用的 ,但目前浏览器支持相当有限。Opera是目前唯一个实现这些功能的浏览器,但只支持视频Internet Explorer 10也将对其进行部分支持,Firefox也会跟随。

  总结

  在本文中,就HTML 5 视频和音频中大家比较关心的问题作了解答,虽然没包括太多内容,但不少是读者关心的,如果有更多的关于HTML 5多媒体的问题,请继续关注itpub。

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐

  • 对话陈本峰:HTML5究竟给企业带来了什么?

    智能手机的普及,移动计算的应用,带火了HTML5技术。尤其,当我们看到微软朋友圈被“故宫与腾讯合作”的广告刷屏,我们不得不承认,HTML5技术确实很重要,但是HTML5究竟带来了什么,与以往移动技术有什么不同?

  • HTML5促进企业移动化服务走向极致

    在企业困扰于传统移动化方式过于复杂时, HTML5凭借其天然的跨平台特性,乘势而起并逐渐得到企业的关注。可是,由于HMTL5标准建立时间不长,展示性能及稳定性更是需要和浏览器有一个良好的兼容,除此之外企业更是缺乏实际应用经验,所以基于HTML5技术的企业级服务市场还处于一片初创状态。

  • HTML5如何在企业中深入使用?

    据调查显示全球拥有490亿 在线设备,比人口数量多几倍,这说明平均每人拥有不只一部分在线设备。由此可见,全球移动生态系统是多么的庞大。

  • 企业内是否一定要支持Android?

    让我们看看Google正在如何改进Android的功能,去帮助运行业务,并且重新思考该平台是否是企业可用的工具。