Skip to content

zmmbreeze/DeadSimpleVideoPlayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

工具与参考链接

About

Dead simple html5 Video player.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published