HTML5视频发展状况报告

     英文原文：    <a href="/misc/goto?guid=4958328266381992802" target="_blank">The State Of HTML5 Video</a>    <p>        HTML5已经进入了在线视频市场，这是一件激动人心的事情，同时也对开发者提出了挑战。随着 HTML5 规范和各种浏览器的不断改变，LongTail Video 花费了大量的时间来弄清楚这一技术的本质，并且在各种浏览器以及设备上测试了播放效果，然后针对 HTML5 播放效果对产品进行了优化。</p>    <p>        本文意在与其他的用户以及开发者分享 HTML5 所支持的技术以及目前无法实现的技术。</p>    <p>        这篇报告重点关注 HTML5 支持技术的当前状况，我们还将继续完善我们的产品，希望大家能够从我们发现的结果中获得帮助，我们将测试的结果分成了几个主题。</p>    <p style="text-align:center;"><img title="更多..." alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/12bf9e19374920de3146a64775f46a5e.gif" width="1" height="1" /></p>    <p>        随着 HTML5 视频的发展，这篇报告也会随着发生改变。如果一个浏览器或是设备添加了新的功能，我们将在这篇报告中补充相关内容。对于那些不常使用的 HTML5 视频功能也是一样。欢迎在 <a href="/misc/goto?guid=4958328267193680444" target="_blank">非死book</a> 上与我们讨论。</p>    <p>        <strong>1.  浏览器和设备的市场份额</strong></p>    <p style="text-align:center;"><img alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/f6d79ec40bcd5015354d7f455e007615.jpg" width="333" height="199" /></p>    <p>        首先分享的是浏览器和设备的市场份额统计数据，以及它们目前支持的模式。</p>    <p>        目前还难以给出一个准确的数据，因为两大数据提供商——<a href="/misc/goto?guid=4958328267986147092" target="_blank">StatCounter</a> 和 <a href="/misc/goto?guid=4958328268788270099" target="_blank">NetMarketShare</a> 给出的结果存在着很大的不同。不同地区的市场份额也存在着明显的差异。</p>    <p>        下面是 StatCounter 在 2011 年 11 月给出的统计数据，<a href="/misc/goto?guid=4958328269581130136" target="_blank">桌面</a>设备和<a href="/misc/goto?guid=4958328270378974138" target="_blank">移动</a>设备占有了1% 的市场份额。</p>    <p style="text-align:center;"><img title="点击查看原始大小图片" alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/c87b2902ee3f2010962be5f8faa1eccf.jpg" width="720" height="458" /></p>    <p>        已经有2/3的市场支持 HTML5 了。话虽如此，但是 Flash 还有它的生存空间。在桌面上，IE6/7/8占据了很大的市场份额，并且这一情况还可能<a href="/misc/goto?guid=4958328271182636505" target="_blank">持续许多年</a>。由于它不支持 HTML5，像 Flash 这类替代技术还将存在于视频播放应用中。至于其他的浏览器，它们基本已经完全支持 HTML5 视频了。</p>    <p>        移动手机和平板电脑在最近的几年里<a href="/misc/goto?guid=4958328271982314159" target="_blank">已经融合</a>成了一个新的格局。目前，只有 iOS 和 Android 占有很大的市场份额。它们都支持 HTML5 视频。Android 仍然支持 Flash，但是它最近也宣布以后推出的手机<a href="/misc/goto?guid=4958328272785171069" target="_blank">将不再安装 Flash 插件</a>。</p>    <p>        目前最流行的设备（XBox、PS3、Apple TV、Roku）既不是 web 浏览器，也不是 app markets。但随着 Apple 和 Google 新产品的推出，2012年这一格局将会有所改变。</p>    <p style="text-align:center;"><img alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/cda3689aa2c08930c197eac704bd0856.jpg" width="333" height="199" /></p>    <p>        <strong>2.  媒体格式</strong></p>    <p>        HTML5最大的挑战之一就是对视频/音频格式支持的断裂。以下就是 HTML5 模式的当前情况统计。</p>    <p style="text-align:center;"><img title="点击查看原始大小图片" alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/220112ec812a9fab20358acffbaf667c.jpg" width="719" height="349" /></p>    <p>        在 <a href="/misc/goto?guid=4958328273587458132" target="_blank">Chrome 官方宣布放弃 MP4</a>以后，MP4的支持情况将会急剧下降。但这一情况目前还难以预测。</p>    <p>        iOS 和 Android 只支持 MP4 视频。直到 WebM 解码器成为硬件并集成到手机中，但这一情况还将困扰所有的移动设备。可以在 <a href="/misc/goto?guid=4958328274378539053" target="_blank">WebM 的博客</a>上看到这一工作的最新进展情况。</p>    <p>        每个浏览器支持添加多源下载的标签。我们的测试显示包含类型属性将阻止一些预下载，但是会破坏 Android 2.2 的兼容性。在类型属性中设置编解码器不会影响任何浏览器。</p>    <p>        在我们的测试中，并没有包含 Ogg 视频格式。这一格式<a href="/misc/goto?guid=4958328275175901119" target="_blank">很少使用</a>，并且质量也不如 MP4 和 WebM。Firefox 3.6 是现在唯一一个支持 Ogg 但是不支持 WebM 的浏览器，而它的市场份额正在<a href="/misc/goto?guid=4958328275970711957" target="_blank">急剧下降</a>（2011年 12 月市场份额为5%）。</p>    <p style="text-align:center;"><img alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/eced3ae2bbe8efbc6e91c8e696949a7b.jpg" width="333" height="199" /><br />  </p>    <p>        <strong>3.  标签属性</strong></p>    <p>        HTML5视频标签支持多种属性，并且大部分属性已经能够支持跨浏览器和设备访问了。除了宽度、高度外，还有：</p>    <p style="text-align:center;"><img title="点击查看原始大小图片" alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/6259753c21de7f329d9e9fb19ed3f1a3.jpg" width="724" height="343" /></p>    <p align="left">        Firefox 目前尚不支持<em>loop</em>属性，但是其他的属性在桌面上可以使用。值得一提的是新的<em>muted</em> 属性目前应用并不广泛，但是我们预测它很快将被大量使用。</p>    <p align="left">        移动浏览器不支持 preload、autoplay 和 muted，但是 iOS5 已经开始支持<em>loop</em>了。iOS4和 iOS5 的另一个区别就是 iOS4 总是使用多个请求预下载视频文件，而 iOS5 则不会预下载视频。</p>    <p align="left">        每个浏览器的视频控制看起来各有不同，但是它们都提供了相同的选项：一个播放/暂停开关、一个播放进度条和一个音量控制条。Safari 还提供了 2 个额外的按钮：全屏和 30 秒回退。</p>    <p align="left">        移动设备上的视频控制与桌面浏览器有很大的不同：</p>    <ul>     <li>在 iPad 上，视频控制还是非常相似的，只是它没有音量控制条（音量控制使用硬件按钮完成）。和 Safari 一样，它也有一个全屏按钮。</li>     <li>在 iPhone 上，在屏幕中间只有一个循环播放按钮。点击以后，视频将自动全屏播放。退出全屏模式以后，循环播放按钮重新出现。</li>     <li>Android 2.2 上，不会显示任何控制按键。这意味着，只能通过自定义的 JavaScript 代码播放视频。和 iPhone 一样，视频只能全屏播放。</li>     <li>在 Android 2.3 上，有一个控制栏。必须点击播放按钮才能播放视频；直接点击视频画面并不会有任何响应。虽然比 Android 2.2 有所改进，但是还是存在很多的 UX（用户体验）问题。</li>    </ul>    <p style="text-align:center;"><img alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/73a8f79c5683ecf3c3a708cc5c9152e1.jpg" width="299" height="199" /></p>    <p>        <strong>4.  全屏播放</strong></p>    <p>        可能最初你觉得全屏播放只是一个无关紧要的功能，但是它实际上是一个影响 HTML5 视频好坏的重要技术。全屏播放能够提升视觉体验并增加观看者的参与感。HTML5的全屏播放技术才刚刚起步，可以通过下面的表格进一步了解。</p>    <p style="text-align:center;"><img title="点击查看原始大小图片" alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/2bb243ed92b3f2a3fa575e76e0147379.jpg" width="722" height="384" /></p>    <p>        在许多的桌面浏览器中都使用了内置的控制机制实现全屏播放。Firefox 使用右键菜单选项，而 Safari 则采用的是一个控制栏按钮。在移动设备上，全屏技术被广泛应用。iPad 上总是有一个全屏开关，而 iPhone/Android 上的视频播放模式总是全屏的。</p>    <p>        W3C 最近正在开发一个<a href="/misc/goto?guid=4958328276782825720" target="_blank">全屏 API 标准</a>。这个 API 可以将所有的 HTML 元素渲染成全屏模式，因此可以在视频中添加各种自定义控件。Safari 和 Chrome 的最新版本已经支持这一 API 了，而 Firefox 10 也将引入该 API。</p>    <p>        用户显示器的长宽比与视频元素的大小通常并不匹配。因此，如何控制视频在屏幕上的布局至关重要。在 iOS 中，提供了一个内置的控件用于在视频原始大小和全屏播放模式间切换。Opera 的 <a href="/misc/goto?guid=4958328277578123412" target="_blank">CSS3 object-fit</a> 属性也是完成类似的功能的。在其他的浏览器中，视频总是根据屏幕的尺寸调整大小。</p>    <p style="text-align:center;"><img alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/ebd4cd6d2e47db8775cc2e15ffc648b1.jpg" width="333" height="199" /></p>    <p>        <strong>5.  自适应流</strong></p>    <p>        自适应流是在线视频的一个核心组成部分。它能够实现：缓冲控制、流内质量调整、live/dvr 以及密码和 DRM 安全机制。自适应流并不属于 HTML5 标准，但是浏览器可以通过从 HTML5 的<source></source>标签中下载控制表单实现这一功能。目前支持 HTML5 的平台中只有 iOS 提供自适应流。</p>    <p style="text-align:center;"><img title="点击查看原始大小图片" alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/cd820e60e168a866cb21e9729d8741b4.jpg" width="721" height="344" /></p>    <p>        Safari/iOS 已经支持 Apple 的 HTTP Live Streaming 协议了，而 Android 也准备支持 HLS，但是这一协议还存在许多问题并且还太新，不足以广泛使用。MPEG DASH 是由 MPEG 开发的一款协议，用于规范自适应流。它还是一个全新的协议，目前尚未得到任何浏览器的支持。</p>    <p>        为了评测以及规范自适应流的行为，必须制定相应的 QOS 标准。W3C/WhatWG 考虑了一些协议，但目前为止，只有 Firefox 支持部分解析帧、解码和显示规范。</p>    <p>        每个浏览器都支持使用 HTTP 1.1 范围请求寻找视频中尚未下载的部分。这减少了对自适应流的需要。</p>    <p style="text-align:center;"><img alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/238e557f245fbc38bc266d4352fa436d.jpg" width="333" height="199" /></p>    <p>        <strong>6.  可访问性</strong></p>    <p>        由于 HTML5 对浏览器而言是 native 的，它在可用性方面比 Flash 这类插件更具优势。要让视频具有可访问性，它必须能够使用键盘控制，还必须使用封闭的字幕和视频描述渲染，后者可以使用 HTML5 <track></track>元素实现。以下的表格概述了不同浏览和设备上，HTML5对键盘和文本追踪的支持情况。</p>    <p style="text-align:center;"><img title="点击查看原始大小图片" alt="HTML5视频发展状况报告" src="https://simg.open-open.com/show/233aefcdd5fb3bc11581577dc86ee316.jpg" width="720" height="347" /></p>    <p>        IE、Firefox 和 Opera 上能够使用键盘控制 HTML5 视频元素。IE/Firefox 考虑了所有的视频标签，使用空格控制视频的播放/暂停，通过左/右和上/下键控制进度和音量。Opera 中可以使用 tab 键控制所有的控件。</p>    <p>        尽管 HTML5 文本追踪正在积极发展，但目前还没有任何浏览器支持这一功能。尽管各个浏览器都推出了一些测试版支持<track></track>标签。一旦浏览器正式支持文本追踪功能，我们将在报告中及时更新相关内容并提供更加丰富的测试用例。</p>    <p>        HTML5视频规范定义了两种播放闭合字幕的方法——视频元素字幕和描述。第一种方法使用多种内嵌的音频/视频/文本轨道播放影片。第二种使用多个     <audio>      或是      <video>       元素实现同步播放。目前还没有浏览器实现这些方法。       <br />       <br /> 来自:       <a id="link_source2" href="/misc/goto?guid=4958328278370361402" target="_blank">www.iteye.com</a>      </video>     </audio></p>