HTML5技术

《HTML5》 Audio/Video全解 - Samcc(2)

字号+ 作者:H5之家 来源:H5之家 2016-12-14 13:00 我要评论( )

Audio 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 :支持

   Audio 
  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>

 

  再来张截图示意:()

 

 

  五、疑难杂症   1、mp4格式视频无法在chrome中播放

  Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件)。
为什么是部分MP4呢?MP4有非常复杂的含义(见),普通人对MP4的理解是后缀为.mp4的文件。但MP4本身不是一种简单的视频格式,它是一个包装了视频和音频格式的壳。至于里面的视频和音频使用什么编码格式是可变的。MP4的视频格式可以使用DivX也可使用H264,Chrome只支持H264。
  然后,我猜测问题的原因是这样的:Chrome浏览器见到MP4后缀的文件,使用了原生HTML5视频播放起播放,但却发现视频格式无法解码。对于Firefox,它不支持原生播放MP4,于是使用了Flash,绝大部分的视频格式基本都可通过Flash播放。
  这篇2011年1月的消息提到Google将放弃对H264的支持:。这篇是Google方面的描述:。如果Google不再支持在Chrome上原生播放MP4,那么会调用Flash播放器播放,这样反而不会出现有些MP4文件播放不了的问题。
  为什么Chrome不支持所有的视频编码格式?绝大部份的视频编码格式都是要付版权费的,Google已经为H264买了单,Firefox没有Google那么有钱不愿意买。
  最后,我录制了一段教学视频,指导大家怎样把各种视频转换成兼容性比较好的MP4文件。视频中使用的软件是“格式工厂”(),这个软件基本上只是做了一个界面,其核心调用了开源软件FFMPEG。由于它违反了FFMPEG的LGPL许可协议,备受指责。使用Linux的朋友可以直接使用FFMPEG命令进行视频格式转换,命令如下:
  ffmpeg -i infile.flv -vcodec libx264 o5.mp4
  如果转换出的视频在某些设备还是无法播放,可以试试利用MediaCoder转换兼容性更好的MP4

  2、让服务器能正确识别多媒体的MIME类型

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 Canvas玩转酷炫大波浪进度图 - 【当耐特】

    HTML5 Canvas玩转酷炫大波浪进度图 - 【当耐特】

    2016-12-14 11:01

  • html5实现GIF图效果 - string卿

    html5实现GIF图效果 - string卿

    2016-12-13 10:01

  • Html5 Json应用 - 飞翔的月亮

    Html5 Json应用 - 飞翔的月亮

    2016-12-12 17:00

  • HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    2016-12-12 15:00

网友点评
<