资讯频道 → Web前端
阅读更多

10顶
2踩

Web前端

原创新闻 HTML5视频发展状况报告

2012-02-06 11:39 by 正式记者 WebAppTrend 评论(11) 有11052人浏览
HTML5 视频 浏览器

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

注：这篇报告来自 LongTail Video

 

HTML5已经进入了在线视频市场，这是一件激动人心的事情，同时也对开发者提出了挑战。随着HTML5规范和各种浏览器的不断改变，LongTail Video花费了大量的时间来弄清楚这一技术的本质，并且在各种浏览器以及设备上测试了播放效果，然后针对HTML5播放效果对产品进行了优化。

 

本文意在与其他的用户以及开发者分享HTML5所支持的技术以及目前无法实现的技术。

 

这篇报告重点关注HTML5支持技术的当前状况，我们还将继续完善我们的产品，希望大家能够从我们发现的结果中获得帮助，我们将测试的结果分成了几个主题。


随着HTML5视频的发展，这篇报告也会随着发生改变。如果一个浏览器或是设备添加了新的功能，我们将在这篇报告中补充相关内容。对于那些不常使用的HTML5视频功能也是一样。欢迎在Facebook 上与我们讨论。

 

1.  浏览器和设备的市场份额

 

 

首先分享的是浏览器和设备的市场份额统计数据，以及它们目前支持的模式。

 

目前还难以给出一个准确的数据，因为两大数据提供商——StatCounter  和NetMarketShare 给出的结果存在着很大的不同。不同地区的市场份额也存在着明显的差异。

 

下面是StatCounter在2011年11月给出的统计数据，桌面 设备和移动 设备占有了1%的市场份额。


 

已经有2/3的市场支持HTML5了。话虽如此，但是Flash还有它的生存空间。在桌面上，IE6/7/8占据了很大的市场份额，并且这一情况还可能持续许多年 。由于它不支持HTML5，像Flash这类替代技术还将存在于视频播放应用中。至于其他的浏览器，它们基本已经完全支持HTML5视频了。

 

移动手机和平板电脑在最近的几年里已经融合 成了一个新的格局。目前，只有iOS和Android占有很大的市场份额。它们都支持HTML5视频。Android仍然支持Flash，但是它最近也宣布以后推出的手机将不再安装Flash插件 。

 

目前最流行的设备（XBox、PS3、Apple TV、Roku）既不是web浏览器，也不是app markets。但随着Apple和Google新产品的推出，2012年这一格局将会有所改变。


2.  媒体格式

 

HTML5最大的挑战之一就是对视频/音频格式支持的断裂。以下就是HTML5模式的当前情况统计。


 

在Chrome官方宣布放弃MP4 以后，MP4的支持情况将会急剧下降。但这一情况目前还难以预测。

 

iOS和Android只支持MP4视频。直到WebM解码器成为硬件并集成到手机中，但这一情况还将困扰所有的移动设备。可以在WebM的博客 上看到这一工作的最新进展情况。

 

每个浏览器支持添加多源下载的标签。我们的测试显示包含类型属性将阻止一些预下载，但是会破坏Android 2.2的兼容性。在类型属性中设置编解码器不会影响任何浏览器。

 

在我们的测试中，并没有包含Ogg视频格式。这一格式很少使用 ，并且质量也不如MP4和WebM。Firefox 3.6是现在唯一一个支持Ogg但是不支持WebM的浏览器，而它的市场份额正在急剧下降 （2011年12月市场份额为5%）。

 

3.  标签属性

 

HTML5视频标签支持多种属性，并且大部分属性已经能够支持跨浏览器和设备访问了。除了宽度、高度外，还有：

 

 

Firefox目前尚不支持loop 属性，但是其他的属性在桌面上可以使用。值得一提的是新的muted  属性目前应用并不广泛，但是我们预测它很快将被大量使用。

 

移动浏览器不支持preload、autoplay和muted，但是iOS5已经开始支持loop 了。iOS4和iOS5的另一个区别就是iOS4总是使用多个请求预下载视频文件，而iOS5则不会预下载视频。

 

每个浏览器的视频控制看起来各有不同，但是它们都提供了相同的选项：一个播放/暂停开关、一个播放进度条和一个音量控制条。Safari还提供了2个额外的按钮：全屏和30秒回退。

 

移动设备上的视频控制与桌面浏览器有很大的不同：

  • 在iPad上，视频控制还是非常相似的，只是它没有音量控制条（音量控制使用硬件按钮完成）。和Safari一样，它也有一个全屏按钮。
  • 在iPhone上，在屏幕中间只有一个循环播放按钮。点击以后，视频将自动全屏播放。退出全屏模式以后，循环播放按钮重新出现。
  • Android 2.2上，不会显示任何控制按键。这意味着，只能通过自定义的JavaScript代码播放视频。和iPhone一样，视频只能全屏播放。
  • 在Android 2.3上，有一个控制栏。必须点击播放按钮才能播放视频；直接点击视频画面并不会有任何响应。虽然比Android 2.2有所改进，但是还是存在很多的UX（用户体验）问题。

4.  全屏播放

 

可能最初你觉得全屏播放只是一个无关紧要的功能，但是它实际上是一个影响HTML5视频好坏的重要技术。全屏播放能够提升视觉体验并增加观看者的参与感。HTML5的全屏播放技术才刚刚起步，可以通过下面的表格进一步了解。

 

 

在许多的桌面浏览器中都使用了内置的控制机制实现全屏播放。Firefox使用右键菜单选项，而Safari则采用的是一个控制栏按钮。在移动设备上，全屏技术被广泛应用。iPad上总是有一个全屏开关，而iPhone/Android上的视频播放模式总是全屏的。

 

W3C最近正在开发一个全屏API标准 。这个API可以将所有的HTML元素渲染成全屏模式，因此可以在视频中添加各种自定义控件。Safari和Chrome的最新版本已经支持这一API了，而Firefox 10也将引入该API。

 

用户显示器的长宽比与视频元素的大小通常并不匹配。因此，如何控制视频在屏幕上的布局至关重要。在iOS中，提供了一个内置的控件用于在视频原始大小和全屏播放模式间切换。Opera的 CSS3 object-fit  属性也是完成类似的功能的。在其他的浏览器中，视频总是根据屏幕的尺寸调整大小。

5.  自适应流

 

自适应流是在线视频的一个核心组成部分。它能够实现：缓冲控制、流内质量调整、live/dvr以及密码和DRM安全机制。自适应流并不属于HTML5标准，但是浏览器可以通过从HTML5的<source>标签中下载控制表单实现这一功能。目前支持HTML5的平台中只有iOS提供自适应流。


 

Safari/iOS 已经支持Apple的HTTP Live Streaming协议了，而Android也准备支持HLS，但是这一协议还存在许多问题并且还太新，不足以广泛使用。MPEG DASH是由MPEG开发的一款协议，用于规范自适应流。它还是一个全新的协议，目前尚未得到任何浏览器的支持。

 

为了评测以及规范自适应流的行为，必须制定相应的QOS标准。W3C/WhatWG考虑了一些协议，但目前为止，只有Firefox支持部分解析帧、解码和显示规范。

 

每个浏览器都支持使用HTTP 1.1范围请求寻找视频中尚未下载的部分。这减少了对自适应流的需要。

6.  可访问性

 

由于HTML5对浏览器而言是native的，它在可用性方面比Flash这类插件更具优势。要让视频具有可访问性，它必须能够使用键盘控制，还必须使用封闭的字幕和视频描述渲染，后者可以使用HTML5 <track>元素实现。以下的表格概述了不同浏览和设备上，HTML5对键盘和文本追踪的支持情况。


 

IE、Firefox和Opera上能够使用键盘控制HTML5视频元素。IE/Firefox考虑了所有的视频标签，使用空格控制视频的播放/暂停，通过左/右和上/下键控制进度和音量。Opera中可以使用tab键控制所有的控件。

 

尽管HTML5文本追踪正在积极发展，但目前还没有任何浏览器支持这一功能。尽管各个浏览器都推出了一些测试版支持<track>标签。一旦浏览器正式支持文本追踪功能，我们将在报告中及时更新相关内容并提供更加丰富的测试用例。

 

HTML5视频规范定义了两种播放闭合字幕的方法——视频元素字幕和描述。第一种方法使用多种内嵌的音频/视频/文本轨道播放影片。第二种使用多个<audio>或是<video>元素实现同步播放。目前还没有浏览器实现这些方法。

 

文章来源：The State Of HTML5 Video

10
顶
2
踩
评论 共 11 条 请登录后发表评论
11 楼 yzongjie 2012-05-07 14:30
楼主辛苦了，本人严重关注 html5
10 楼 ufoqhmdt 2012-02-07 10:42
祈祷IE的消亡!
9 楼 jiuzhexingfu 2012-02-07 09:22
这个新闻早看过了，不是HTML5上的新闻吗？ITEYE也不说明下
8 楼 晨曦的朝阳 2012-02-07 08:41
IE6这恶梦在国内要消停还没那么容易呀。
7 楼 ad6543210 2012-02-07 08:13
gnomewarlock 写道
ad6543210 写道
android 2.3 內建的只支援標籤，並不支援mp4/ogv/webm
都測過不能撥放
按下去就是錯誤
某些瀏覽器可以另外開程式用stream的方式撥放


台湾同胞么？

對阿
我都來這看新聞
6 楼 ipopr 2012-02-06 21:55
支持，html5有很多机会
5 楼 gnomewarlock 2012-02-06 15:46
ad6543210 写道
android 2.3 內建的只支援標籤，並不支援mp4/ogv/webm
都測過不能撥放
按下去就是錯誤
某些瀏覽器可以另外開程式用stream的方式撥放


台湾同胞么？
4 楼 白糖_ 2012-02-06 14:06
没有IE的Web环境会更好
3 楼 zui4yi1 2012-02-06 13:56
只要有用户放假IE6，相信很多人会直接升级到IE9，支持html5
2 楼 ad6543210 2012-02-06 13:08
android 2.3 內建的只支援標籤，並不支援mp4/ogv/webm
都測過不能撥放
按下去就是錯誤
某些瀏覽器可以另外開程式用stream的方式撥放
1 楼 clongjava 2012-02-06 12:44
值得关注！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 基于html5的视频会议

    目前最流行的方式是 通过 Ａｄｏｂｅ的Ｆｌａｓｈ　Ｐｌａｙｅｒ插件将音频和视频嵌入到网 页中，而伴随着 ＨＴＭＬ５技术的发展，在 ＨＴＭＬ５中引入 ｖｉｄｅｏ和ａｕｄｉｏ元素后［ １］，将视频嵌入到网页中便...

  • HTML5视频发展状况

    注：这篇报告来自LongTail Video HTML5已经进入了在线视频市场，这是一件激动人心的事情，同时也对工业开发者提出了挑战。随着HTML5规范和各种浏览器的...HTML5视频发展现状一文意在与其他的用户以及开发者分享HTML

  • html5视频播放解决方案

    html5视频播放解决方案 html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果，特总结分享给大家。 众所周知应用开发分两种：一是原生的native app 二是web app，也就是通过浏览器访问的应用。 ...

  • HTML5视频直播及H5直播扫盲

    分享内容简介： 目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要...1. 怎样利用 HTML5 来播放直播视频 2. 怎样录制直播视频 3.

  • html5 video标签嵌入视频

    前面谈到了网页怎么嵌入flash视频，就想到了另一个问题，flash格式视频在手机上播放，需要手机安装flash播放插件，而且flash视频绝对无法在苹果手机上播放，因为苹果对flash的不支持，导致现在flash前景堪忧。...

  • html5中加视频的代码,向HTML中插入视频并兼容所有浏览器的方法

    向HTML中插入视频有两种方法，一种是古老的object标签，一种是html5中的video标签，前者兼容性相对好些，后者兼容性让人头疼最常用的向HTML中插入视频的方法有两种，一种是古老的标签，一种是html5中的标签。...

  • html5期末大作业课程设计仿苹果官网（源码+报告）

    链接: https://pan.baidu.com/s/1_5ZDXVZmM64ALY2i31Hwfg 提取码: vtrk 一、 需求分析（设计目的） (一) 、可行性分析 时代背景 根据中国互联网络信息中心（CNNIC）在京发布第47次《中国互联网络发展状况统计报告》...

  • HTML5实现音频和视频嵌入

    原生的支持音频和视频，为HTML5注入了巨大的发展潜力。 html实现音频嵌入(传统方式)：这种方式虽然可以实现，但是要浏览器支持Flash而且并不能实现控制，所以要实现起来很麻烦。 那么也就

  • HTML5+CSS3学习总结(完结)

    一、HTML5的语义化 二、CSS3动画 三、CSS3阴影 四、CSS3过渡(非常重要) 五、弹性布局 六、栅格布局 七、渐变 八、媒体查询

  • 浅谈html5 video标签嵌入视频

    前面谈到了网页怎么嵌入flash视频，就想到了另一个问题，flash格式视频在手机上播放，需要手机安装flash播放插件，而且flash视频绝对无法在苹果手机上播放，因为苹果对flash的不支持，导致现在flash前景堪忧。...

  • HTML5环形音乐播放器

    但是这种状况将会随着 HTML5 的发展而改变。就视频而言，HTML5 新增了 video 来实现在线播放视频的功能。 使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等，功能十分强大，同时代码比较少...

  • HTML5期末大作业：我的家乡网站设计——我的家乡

    知识应用： 在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 3. 内容介绍： 《我的家乡》共有8个页面，分别为 index.html【首页】 该...

  • html5基础知识，期末复习大全

    html，css，js超详细基础知识及响应式设计，动画等进阶

  • HTML5知识点总结

    1.什么是 HTML5 1.1 HTML版本  1.2 HTML5简介 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与 XHTML的新一代标准版本，所以叫HTML5。 XHTML 可扩展超...

  • HTML5概述 - 语义化标签

    一、HTML5 简介1、什么是 HTML5HTML5 不是一门新的语言，而是我们之前学习的 HTML 的第五次重大修改版本。2、HTML 的发展历史•超文本标记语言（第一版，不叫 HTML 1.0）——在 1993 年 6 月作为互联网工程工作小组...

  • HTML5期末大作业：我的家乡网站设计5

    HTML5期末作业，web作业，我的家乡

  • HTML5详细介绍及使用

    HTML5详细介绍及使用 一、HTML5简介 1、HMTL5的定义 在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最...

  • html中插人视频教程,HTML中插入视频并兼容所有浏览器

    向HTML中插入视频有两种方法，一种是古老的object标签，一种是html5中的video标签，前者兼容性相对好些，后者兼容性让人头疼最常用的向HTML中插入视频的方法有两种，一种是古老的标签，一种是html5中的标签。...

  • 软考-考生常见操作说明-202405101400-纯图版.pdf

    软考官网--2024常见操作说明：包括如何绘制网络图、UML图、表格等 模拟作答系统是计算机技术与软件专业技术资格（水平）考试的电子化考试系统界面、作答过程的仿真系统，为各级别、各资格涉及输入和页面显示的部分题型提供体验性练习。

  • setuptools-34.0.3.zip

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics