`
he91_com
  • 浏览: 376199 次
文章分类
社区版块
存档分类
最新评论

为了 HTML5,到底需要多少种编码格式?

 
阅读更多

HTML5 的 <video> 标签真的很威武,几乎所有的主流浏览器可以直接提供本地的视频播放功能,相对于以前通过 Flash 这种类似“中继”的播放方式,要先进很多。同时也为一些不支持 Flash 播放的移动设备带来的希望。

  也许,你会因为 <video> 标签可以支持到的视频种类而感到困惑。嗯,到底为了实现 HTML5 的特性,到底要转换多少种编码格式的视频?WebM,Ogg 还是 MP4?那…iPhone 和 Android 又需要哪种编码格式?如果我还要提供高、中、低三种码率的视频呢?

  下面就来看看到底 HTML5 <video> 标签的详细情况吧。

关于 Web 格式

  目前来说,广泛被浏览器支持的的视频编码格式总共有三种,但是没有一种可以达到通吃所有浏览器的境界。所以对于同一个视频,至少需要两种格式,才能在所有浏览器里播放。

  首先要选择一个被支持最多的视频格式,那么就是 MP4 + H.264 这个组合了,音频方面则是 AAC 或者 MP3。MP4 封装的视频,可以在 Safari、Chrome 和 IE9 里播放(悲剧的是 IE9 只支持 Windows Vsita 和 Windows 7)。同时,这个组合也是你通过 Flash 来作为播放器播放的最好选择了,同时这个组合也可以在很多手持设备上播放,比如 iOS、Android、Blackberry、PSP、PS3 等等。在 H.264 编码的时候,可以选择 “High Profile” 以获得最好的编码质量,或者 “Baseline” 来应对一些移动设备。

  除此之外,还有两个组合,WebM + VP8 和 Ogg + Theora + Vorbis 来满足其他的浏览器。WebM 可以在 Firefox(4.0+)、Chrome(6.0+)和 Opera(10.60+)中播放;Ogg 可以在 Firefox(3.5+)、Chrome(3.0+)和 Opera(10.54+)中播放。

  那么问题又来了,如果要从中选择一个,是 Ogg 呢,还是 WebM 呢?

  从我们(Zencoder)来看,WebM 肯定是未来开放式视频格式的领跑者,VP8 比起 Theora 来说,要更加的优秀,而且还有强大的社区作为其后盾,特别是 Google 的支持。

  反过来看 Ogg,其最大的特点是她支持了 44.64% 的浏览器(译者注:这里应该是指浏览器分部率中,可以播放的比例),而 WebM 仅支持 9.35% 的浏览器。如果仅着眼于 2010 年 10 月,那么 Ogg 也是一个不错的选择。如果你是为了未来的 1-2 年,那么WebM 似乎更有优势一些。

  推荐:MP4 + WebM 或者 Ogg 其中一种,当然全部都编码出来也可以 ^^。

关于移动设备

  和浏览器的情况一样,在移动设备上也没有一个可以通吃全盘的编码方案。不同的移动设备有着不同的编码标准,甚至比起浏览器领域来说,更加的复杂。不过还是有一些方案可以让你省不少精力的。

  在这里你可以查看一个完整的移动设备编码列表

  1. 现在绝大多数的移动设备都支持 MP4/H.264。包括 iOS 系列的产品(iPhone、iPod、iPad、Apple TV 等),绝大多数的 Android 设备,新的黑莓手机。对于这类设备,编码的时候应该选择 “Baseline”。在分辨率上,对于 iOS 和 Android 设备,选择不高于 640×480 的分辨率即可,对于黑莓系列手机,选择不高于 480×360 的分辨率即可。

  注意:可以在 iPhone 上播放的这类编码格式,同样也可以在 HTML5(当然仅仅是一部分浏览器) 或者 Flash 中播放。如果你怕麻烦或者想节省一些转换花费的时间,可以考虑选择在编码的时候,不高于 iOS 系列设备和 Android 系列设备的分辨率。如果你不怕麻烦,并且视频在不同的码率上表现差异很大,或者需要在电脑上有更清晰的表现,就多编码出来几个不同的码率吧。

  2. 对于一些老的移动设备,选择 3GP/MPEG4。绝大多数的黑莓手机和一些 Android 的手机,都支持这种格式。同时,3GP 在 iPhone 和 iPod 上都可以播放。

  3. 关于 WebM,现在也许还不是一个好的选择,虽然在一些 Android 的手机上已经可以播放,但是支持还不是很广泛。预计未来 1-2 年会有更多的支持 WebM 格式的手机。

  推荐:怕麻烦则 MP4 格式,640×480 或者 480×360。不在乎编码时间和存储空间,就应该选择三种 MP4 编码方案(480×360,640×480,720p + “Main profile” )
外加一到两种 3GP 格式(320×240 或者 176×144),可以参考这份日志来获取更加详细的编码参数。

关于多种比特率

  有可能你在考虑,是不是要为带宽很足的用户准备高比特率的视频,并且为了照顾小带宽的用户,另外再准备一份低比特率的视频呢?如果你的用户已经 开始在互联网上观看高清的视频,那么为了迎合这类用户的习惯和用户体验,那么答案则为是。可以考虑提供 2-3 种不同比特率或者分辨率的视频来满足使用不同互联网连接方式的用户。比如提供一份 640×360 和 一份 1280×720 的选择。未来我们会更多的讨论这个问题。

关于流媒体播放

  本篇文章不讨论关于流媒体的问题,并且 RTMP(Flash)、Smooth Streaming(Silverlight)、HTTP Live Streaming(iOS)都要求特殊的视频格式。这已经超出了我们要讨论的范围了。未来将会有相关的文章进行讨论

结论

  1. 最低限度的支持 HTML5,应该选择 MP4 + WebM 或者 Ogg 其中的至少一种,并且使用 Flash 来播放 MP4 以便提供向下兼容支持。

  2. 移动设备方面,H.264/MP4 会让你省心很多,如果可以提供 2-3 种不同分辨率和码率的视频,会大大增加兼容性。

建议

  以下是关于所有类型的视频编码方案建议,Zencoder 支持以下列出的所有编码格式(广告了…)

1. 只为能播放

HTML5,Flash和移动设备:MP4/H.264,使用 “Baseline” 编码,480×360 或者 640×480
HTML5:WebM 或者 Ogg

2. 更上一层楼

HTML5,Flash:MP4/H.264,“High profile” 编码
HTML5:WebM
HTML5:Ogg
移动设备:MP4/H.264,“Baseline profile” 编码,分辨率 480×360 或者 640×480

3. 我要支持所有设备和浏览器

HTML5,Flash:MP4/H.264,“High profile” 编码
HTML5: WebM
HTML5:Ogg
移动设备:MP4/H.264,“Baseline profile” 编码,分辨率选择 480×360 以便提供高兼容性
移动设备:MP4/H.264,“Main profile” 编码,分辨率 1280×720 以便支持新的设备(如 iPhone4、iPad 和 Apple TV)
移动设备:3GP/MPEG4,分辨率320×240 和(或) 177×144 以便支持非智能手机

分享到:
评论

相关推荐

    编码批量转换工具

    1 支持格式众多的字符串编码转换器 支持几十种字符编码转换。比如utf8转gbk,gb2312转utf8,ansi转utf8,utf8 unicode 转换,utf8转换gb2312,utf16、utf32、utf8编码转换,gbk转换utf8,utf8 ascii转换。 2 强大正则...

    批量转换文件编码格式为UTF-8工具

    批量转换文件编码格式为UTF-8工具.zip 支持多层文件夹替换! 使用说明: 1.文件根目录:即您要转码的文件所在根目录 2.转码文件目录:即您转码后的文件所在目录 3.转码文件后缀:指[文件根目录]下,需要转码的文件后缀,...

    HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码

    HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码,Chrome + Firefox 

    视频编码信息查看工具_5款合集

    光是看扩展名是无法知道影片的正确的编码格式的,特别像DivX这样的高品质、高压缩比的影片格式出现后。除了原本未压缩的AVI影片外,目前使用这样的扩展名格式影就还有DivX、XviD等等,而使用AVIcodec来检测影片的...

    HTML5&CSS3网页制作:多媒体的格式.pptx

    视频格式包含视频编码、音频编码和容器格式。 视频格式 Ogg:指带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。 MPEG 4:指带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。 WebM:指带有 VP8 视频编码和 ...

    java 工具包 h264转码MP4 支持html5播放格式

    h264转码MP4 支持html5播放格式 示例代码: H264TrackImpl h264TrackImpl = new H264TrackImpl(new FileDataSourceImpl("C://a.264")); Movie movie = new Movie(); movie.addTrack(h264TrackImpl); Container ...

    HTML5基础知识-HTML5多媒体标签.pptx

    单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式,文件后缀名.wav。2、MP3 MP3是一...

    22个HTML5 技巧三

    因此,显示HTML5视频的时候,你必须提供两种格式。 17. 视频预先加载 你首先需要决定是否需要浏览器来预先加载视频。是否有需要?假设,一个访客进入某个专门用来显示视频的页面,那么就非常有必要预先加载这个页面...

    html5中如何将图片的绝对路径转换成文件对象

    本文介绍了html5中将图片的绝对路径转换成文件对象,分享给大家,具体如下: 将图片的绝对路径转换成base64编码,请看这篇文章 我们先来理解基本知识点: 1. 理解HTML5中的FileList对象与file对象。 在HTML5中,...

    html5+js实现手机录音功能,支持微信等80%的浏览器内核

    支持任意格式扩展(前提有相应编码器)。 mp3默认16kbps的比特率,2kb每秒的录音大小,音质还可以(如果使用8kbps可达到1kb每秒,不过音质太渣)。 mp3使用lamejs编码,压缩后的recorder.mp3.min.js文件150kb左右...

    编码.slides.html

    Unicode 与 Utf-8 Utf-16等编码, html格式

    批量字符编码转换工具 20070709

    1 支持格式众多的字符串编码转换器 支持几十种字符编码转换。比如utf8转gbk,gb2312转utf8,ansi转utf8,utf8 unicode 转换,utf8转换gb2312,utf16、utf32、utf8编码转换,gbk转换utf8,utf8 ascii转换。 2 强大正则...

    字符串格式化工具JSON、XML、HTML,常用字符串格式转换工具与加密方式查看, Unix时间戳工具

    Java Swing GUI桌面应用工具,集成常用的开发调试工具。 如: 1、格式化:JSON、XML、HTML 2、Unix时间戳,获取最新时间,Unix时间戳转化为通用时间字符串格式 ...5、Base64 加密 解密 6、Unicode 编码 解码

    10个最常见的HTML5面试题 附答案

    答:HTML5 文档类型很简单: HTML5 使用 UTF-8 编码。 问题2、HTML5 中如何嵌入音频? 答:HTML5 支持 MP3、Wav 和 Ogg 格式的音频,下面是在网页中嵌入音频。 问题3、HTML5 中如何嵌入视频? 答:和音频类似,...

    HTML5中如何显示视频呢 HTML5视频播放demo

    在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 3.WebM = 带有 VP8 视频编码和 ...

    STC单片机串口转摩斯电码自动收,发报机(莫尔斯编码自动编码,解码串口显示内容)

    另一个模块接收无线电信号后,单片机按莫尔斯编码格式对接收的电码进行解析,最后将解析后的数据通过232串口发送到电脑串口,测试视频链接:https://v.youku.com/v_show/id_XNDU4MzM3NDM0MA==.html 有完整的电路图...

    html转jsp工具

    1、此工具只针对utf-8和gb2312两种编码格式的网页进行转换,其他编码格式的网页不支持转换! 2、此工具会自动在html页面的开始位置加入以下内容,并自动将html或者htm页面转为jsp后缀的文件 *" pageEncoding="utf-8...

    深入分析JSON编码格式提交表单数据

    以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始。而新出现的JSON格式提交表单数据方法...

    自编文件格式转换器

    1、可以支持常见编码格式如UTF-8、UTF-7、Unicod、ASCII、GB2312、Big5之间的转换。 2、支持选取文件夹批量、文件多选、翦贴板中复制三种文件批量选取方式,能实现指量转换 帮助说明: 功能过滤串如何设置? 例如...

    html5print:HTML5,CSS,JavaScript漂亮打印

    HTML5漂亮打印 这个工具可以漂亮地打印您HTML,CSS和JavaScript文件。 该软件包包括两个部分: 命令行工具html5-print python模块html5print 介绍 此模块可重新格式化网页代码并使之更具可读性。 它面向开发人员,...

Global site tag (gtag.js) - Google Analytics