构建HTML5视频播放器

本文发表于2012年2月/ 3月号 流媒体 杂志, 一年一度的 流媒体行业资料手册.

当我6岁的时候, 我的门牙是金属盖的, 弱视, 矫正我弱视的眼罩, 厚眼镜, 我耳朵里插着塑料管来排液体, 还有语言障碍. HTML5视频有点像6岁的我. 它有可能在某一天成为一个功能齐全的HTML标签. 但现在，它有一些问题. 为了与HTML5合作，我们需要知道它的问题是什么以及如何修补它们. 也就是说, HTML5视频总有一天会成为开发者在网络上播放视频的默认方法. 苹果 坚持在iOS上不支持Flash的决定 Adobe 为其他移动浏览器削减Flash开发, 随着Chrome占领浏览器市场，越来越多的用户支持HTML5视频. 这是一个很好的开始用HTML5视频构建视频体验的好时机.

什么是HTML5视频播放器? 从技术上讲，它是已经内置到HTML5浏览器中的播放器. 它允许我们简单地使用视频标签来嵌入视频. 然而, 并不是每个用户都支持HTML5视频, 甚至在HTML5视频中, 我们需要处理一些bug和跨浏览器的不一致. 所以使用HTML5并不是那么容易. 我们需要的是一个额外的JavaScript库来管理Flash或HTML5的选择，并修复这些错误和不一致. 这就是为什么你会看到许多JavaScript库(包括Video).js)称为HTML5视频播放器. 另外, 这些库通常会提供一个通用的“皮肤”，以便视频控件在浏览器之间看起来相同, 当只使用视频标签时，情况不是这样吗.

的代码

在构建自己的HTML5视频播放器时, 您的嵌入代码将以一个简单的video标签开始，该标签包含视频源和控件属性，以使控件可见. " src "属性应该有一个URL指向你已经上传到网络的视频:

这很简单. 这已经足够让你的视频在许多浏览器中播放了, 这取决于你使用的视频格式. 下一步就是添加支持所有HTML5浏览器所需的其他格式. HTML5视频中主要使用的三种视频格式是MP4、WebM和Ogg. 添加它们, 只需从视频标签中删除" src "属性，并在视频标签中添加源标签:

The 类型 attribute of the source tag tells the browser what format the file is; it helps the browser decide which file to play. 如果你不包括这个, 浏览器必须下载每个文件的一部分来测试它是否支持这种格式. 这会减慢加载过程.

另一个技巧是总是把MP4文件作为第一个源. 旧版本的iOS只会查看第一个源代码标签, 如果它不能播放那个来源, 它只会停下来，而不是在其他百家乐软件中寻找一个它可以播放的.

最后, 对于那些使用不支持HTML5视频的旧浏览器的用户, 你可以添加一个Flash播放器作为备用. 如果你现在有一个Flash播放器，这很简单. 您只需将用于Flash播放器的完全相同的嵌入代码放入源标签之后的视频标签中. 如果浏览器不支持HTML5视频，它将退回到:

像这样使用HTML内置的回退机制是开始支持HTML5视频的最简单方法. 如果你更喜欢使用Flash播放器，只在不支持Flash的情况下使用HTML5, 你可以使用JavaScript和SWFObject (http://code).谷歌.com/p/swfobject)来检测是否支持Flash，并根据需要编写Flash嵌入代码或HTML5视频标签.

还有一个步骤是不需要的，但在今天的一些HTML5视频播放器实践中. 您可以添加下载链接和备用图像:

 

     Download Video: 
     MP4,
     WebM, 
     Ogg

这支持那些不能在Flash或HTML5中播放视频，但可以下载视频并在浏览器外播放的用户. 这包括较旧的手持设备或没有Flash插件的较旧的Internet Explorer版本. 现在的Flash播放器不这样做了, so it’s not totally necessary; also, 如果你的目标是保护你的视频不被下载, 你显然不想这么做.

不管你是否使用最后一步, 这个嵌入代码会让你的视频播放给几乎所有的用户.

选择视频格式

这里有一些策略可以帮助您选择要提供的视频格式. 第一种选择是创建所有三种HTML5视频格式:MP4、WebM和Ogg. 这让你能够使用拥有最多用户的HTML5视频版本的播放器. 如果你正在做一些特别有趣的HTML5视频，并希望尽可能多的用户看到它，这一点很重要. 这也是使用HTML5内置回退时的唯一选择, 如在前面的嵌入代码. 支持HTML5视频的浏览器不会因为没有支持的源而退回到Flash播放器. 这样做的缺点显然是将每个视频编码成三种格式的复杂性和成本. 接下来的两个选项允许您编码更少的格式, 但它们要求你使用JavaScript来检测HTML5视频中是否有浏览器支持的格式，并动态地编写HTML5或Flash嵌入代码.

下一个策略提供了两种格式:MP4和WebM. 这些格式是三种格式中质量较高的格式. Ogg是一种不错的开源格式, HTML5视频中使用的第一种格式是什么, 实际上，它比其他两个得到了更多用户的支持，因为它在浏览器中存在的时间更长. 然而, 对于只支持开放格式的浏览器来说，WebM是一个更高质量的选择, 在过去的一年里, WebM已经在Ogg上获得了足够的优势，可以将其放在首位(参见下图)。. 根据StatCounter的浏览器版本统计,, 大约54%的用户支持Ogg, 而WebM的支持率约为49%. 大约44%的HTML5用户支持MP4, 但它也支持Flash, 这就引出了最后一个选择.

因为iOS设备和Flash都支持MP4, 我们可以提供一种格式，同时仍然支持几乎所有的用户. 使用不支持HTML5 MP4的浏览器的用户将会得到一个Flash播放器. 对于那些打算以Flash为主导的人来说，这个策略是显而易见的选择. 可以避免多种格式的复杂性, 但你也应该知道在某些情况下使用MP4格式时，你可能欠MPEG LA的任何版税.

问题

现在我们已经设置好了基础, 我们可以深入研究我在文章开头提到的一些问题. 这些问题都是HTML5视频作为一项年轻技术的副产品, 随着用户升级到新的浏览器版本，其中许多很快就变得无关紧要了.

自动缓冲或预加载

最初, HTML5视频规范要求浏览器开发者在视频标签中加入一个名为“autobuffer”的属性. 自动缓冲允许我们告诉浏览器在网页加载后立即开始下载视频, 而不是等到用户点击播放. 稍晚一点, 在浏览器已经实现了这个属性之后, the spec was changed; the attribute was then called “preload” with the options “none,”“元数据,和“auto”.这意味着一些较旧的浏览器版本(如.g.、火狐3.5)查找autobuffer属性，而较新的浏览器版本查找preload. 这是一个简单的解决方案, 如果这对您来说是一个重要的功能, 是设置自动缓冲和预加载.

进度或缓冲

规范变更的另一个结果是Firefox版本3.5和3.不支持“buffered”属性. 如果你要构建带有加载条的自定义控件，这一点尤为重要. 这些版本的Firefox会在视频加载时触发一个“进度”事件. 事件对象包含有关已加载多少的信息. 要解决这个问题，您可以检查buffered属性并观察进度事件.

当涉及到HTML5视频的更高级功能时，我们可能仍然会看到规范的变化. 但在很大程度上，它已经锁定，并将保持一致. 上面提到的浏览器版本现在已经很老了, 虽然它们在某种程度上仍在使用, 我认为我们将能够在一年内忽略这些问题.

iOS 3问题

iOS 3是第一代iPad附带的苹果iDevice软件版本, iPhone 3, 3 gs, 以及同一时期的iPod touch. 尽管可以选择升级到iOS 4和iOS 5，但一些用户仍然使用iOS 3.

第一个问题是poster属性. 如果你包含了海报属性，它可能会导致iOS 3设备上的视频中断. 如果你想支持iOS3的用户就得处理这个问题, 您可以简单地删除poster属性. 这不是很理想，但这是一种简单的方法. 在这种情况下，您可以将海报帧拼接为视频的第一帧. 当预加载视频时，第一帧显示给用户，直到视频播放完毕. 您还可以使用JavaScript在页面加载时删除preload属性，并动态创建一个图像标记，其中包含位于视频上方的海报源. 两者都需要一点额外的工作, 但如果你想让海报起作用，你就可以绕过这个问题.

另一个有趣的问题与在页面上包含JavaScript有关. 如果你在页面的标题中包含JavaScript, 就像我们很多人使用jQuery或其他库一样, 它会导致iPad上的视频中断. 如果您将相同的JavaScript移动到文件的末尾, 就在body标签之前, iPad也可以, 但它可能会导致iPhone上的视频中断. 这是一个奇怪的错误，似乎发生，因为软件不能处理同时加载JavaScript和视频. 我发现解决这个问题的最好方法是在页面加载时使用JavaScript重置视频标签的源:

myVideoElement.SRC = " video ".mp4”

Both of these issues were thankfully fixed in iOS 4; let’s hope iOS 3 issues disappear 这 year as well.

安卓系统问题

Android平台上的HTML5视频存在不少问题.

首先，在Android版本2中.2(目前仍在广泛使用)，你甚至不能播放视频. 让视频播放的唯一方法是用JavaScript触发它. 用户不能自己启动它. 你可以通过把整个视频变成一个播放按钮来帮助解决这个问题. 使用jQuery，它看起来像这样:

$ (" # myVideoID ").点击(函数(){ 
     这.玩();
});

其次，类型属性有一个错误. 如果你在源标签中包含类型属性(我们在嵌入代码中做了), 它会破坏安卓设备上的播放. 正如我之前提到的, 包含类型属性对浏览器是有好处的, 但如果你的安卓用户抱怨, 您可以删除类型属性，视频仍然可以工作. 或者你可以使用重置源代码的方法来修复之前提到的iOS的JavaScript问题.

最后，视频元素的canPlayType函数不起作用. 当您传入“video/mp4”字符串时，它应该返回一个“maybe”消息,但是相反, 它总是返回一个空字符串, 这意味着它不能播放格式, 即使它可以. 视频.我创建了下面的代码片段来覆盖Android的canPlayType函数。

var androidVersion = navigator.userAgent
     .匹配(/ Android (\ d +) \..* 苹果WebKit / i);
如果(androidVersion != =零 && androidVer sion[1] < 3) {
     文档.createElement(视频) .构造函数.原型.canPlayType
          = function(类型){
     返回(类型 && 类型.toLowerCase () 

          .indexOf(视频/ mp4) != -1) ? 

          " maybe ": ";

     }; 
}

所以Android的确有很大的改进空间. 现在有更新版本的Android可用, 但设备仍在使用这些旧版本.

下一个步骤

很明显，HTML5视频并不像承诺的那么简单, 但我希望这不会让你气馁. 如果你跟上了, 你现在应该拥有一个可靠的播放器，能够支持比Flash或HTML5更多的用户. 你可以让你的玩家走得更远，但我希望这能给你一个良好的基础. 从这里开始，您可能希望使用视频元素API构建自定义控件. 如果是这样的话, 有很多开源的HTML5视频播放器，你可以看看，以获得一个良好的开端. 如果你有进一步的问题，有一个活跃的社区 Video.js论坛 在哪里你的问题可以很快得到回答. 干杯!

观看史蒂夫•霍夫曼在HTML5视频峰会上关于构建HTML5视频播放器的演讲, 请看下面的视频: