Dead simple html5 Video player.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assert
src
README.md
index.html
play.html

README.md

HTML5 Video调研

控制条与全屏幕播放

iPhone不支持控制条,且点击后直接全屏播放(不会在网页内播放)。android浏览器,大部分都支持控制条,点击控制条上的播放按钮会直接播放,点击视频部分或是全屏幕按钮会全屏幕播放(有些浏览器点击视频部分也不一定全屏幕播放)。控制条上的外观也各有不同,播放按钮、进度条、和最大化按钮是几乎都有的,播放状态指示器和音量控制则不一定有。

比较悲惨的是,android如果不默认设置显示控制条,则会永远不显示。故有些浏览器就会不能全屏播放(不包括用使用fullscreen api)。fullscreen api目前还在草案阶段,支持情况很差不建议使用。所以android机型目前几乎不支持通过js来激活全屏播放。

预览图

iPhone支持预览图,但是透明图片会被默认加上黑色背景。android有很多特殊情况,最新版UC浏览器、Android Chrome是支持预览图的(且背景色是透明的),但是低版本android的默认浏览器则不支持。

高宽

如果不设置默认的高宽,iPhone会自适应初始的高宽。而android浏览器则大多情况下是有个初始高宽,播放后又获取视频真实宽度然后修改自己的高宽,容易导致页面排版变乱。部分android浏览器是等待一段时间后才变成真正的高宽(不需要播放,估计是浏览器在这段时间内从服务器读取的宽高)。情况比较悲观,所以一定要设置默认高宽,避免排版悲剧。

另外有个很重要的bug:在低版本的android浏览器中,高宽如果小到一定程度(例如无法显示所有控制条和播放按钮的情况),则这两个较小的高宽会失效(或显示地很奇怪)。所以在限定一个较小高度时可以用一个外部容器设置高宽并overflow:hidden

自动播放

iPhone不支持自动播放,android上UC浏览器与高版本的默认浏览器是支持自动播放,但是低版本的默认浏览器和非最新版的chrome则不支持。且有些支持的浏览器有很严重的bug:播放之后页面卡死,不显示视频只显示页面。只能点击“撤销”按钮才能回到原来的界面。不推荐使用!

编码与格式

目前测试的结果中:type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'在几乎所有的android(版本2.1以上)和iPhone上都可以播放的。值得注意的是:iPhone的浏览器对提供mp4的server端有一定要求,一般的静态server是满足不了。这估计和Content-Type标头不正确和Apple自己的HTTP Live Streaming (HLS) Protocol有些关系。

Javascript与事件支持

总体来说iPhone与android的支持情况各有优劣。使用这些api之前一定要做好特征检测,不然很容易导致bug。例如:iPhone是不支持video.play()来激活播放的,但是它有个特点是即使被其他元素遮住,点击它所在的那个区域也是可以播放的。

支持情况概览

Android 2.3+的默认浏览器基本都支持mp4格式的video标签,但对全屏支持不全,且都无法通过js激活全屏。旧版本还存在一些bug。iPhone 3.2+的默认浏览器也支持mp4格式的video标签(默认打开即调用默认播放器全屏播放,且无法通过js来播放)。

H.264简介

H.264/MPEG-4第10部分,或称AVC(Advanced Video Coding,高级视频编码),是一种视频压缩标准,一种被广泛使用的高精度视频的录制、压缩和发布格式。第一版标准的最终草案于2003年5月完成。

H.264/MPEG-4 AVC是一种面向块的基于运动补偿的编解码器标准。由ITU-T视频编码专家组与ISO/IEC联合工作组——即动态图像专家组(MPEG)——联合组成的联合视频组(JVT,Joint Video Team)开发。因ITU-T H.264标准和 ISO/IEC MPEG-4 AVC标准(正式名称是ISO/IEC 14496-10 — MPEG-4第十部分,高级视频编码)有相同的技术内容,故被共同管理。

H.264标准可以被看作一个“标准家族”,成员有下面描述的各种配置(profile)。一个特定的解码器至少支持一种,但不必支持所有的。解码器标准描述了它可以解码哪些配置。在HTML的source标签的type属性中可以制定所使用的H.264的配置(profile):

<!-- H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
<!-- H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<!-- H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

codec是“编解码器”的英文翻译。

视频转换

这里推荐使用HandBrake来转换视频,因为它可以选择使用那种profile。步骤如下:

  1. 菜单 File > Source 选择你要转换的视频
  2. 选择 Format 为MP4,选中“Web Optimized”勾选框
  3. 进入video标签,选择H.264 Profile为“Baseline”,level为“3.0”
  4. 进入audio标签,选择Encoder为AAC(faac)

这样得到的转换后视频符合video/mp4; codecs="avc1.42E01E, mp4a.40.2"格式。

具体方案

按照目前的支持情况,需要针对iPhone和android做不同的处理。大概流程为:

  1. 首先用javascript判断浏览器能否播放video/mp4; codecs="avc1.42E01E, mp4a.40.2"格式
  2. 如果能播放,则显示封面预览图和播放按钮
    1. 在iPhone 3.2+下点击直接全屏幕播放
    2. 在android 2.3+下点击进入一个新页面播放。新页面中的播放器框会更大些,且显示播放器默认控制条,方便用户手动最大化
  3. 如果浏览器不能播放,则仅仅显示封面图片

这个方案需要浏览器支持javascript,预估能cover到大多数“高端浏览器(iphone & android)”。这里有一个简单的demo

工具与参考链接