构建 HTML5 应用程序

  • 项目

可行的跨浏览器 HTML5 音频和视频

约翰 · 戴亚

下载代码示例

时首先介绍了 HTML5 的音频和视频标签，编解码器和浏览器的不兼容问题难于使用和不现实的大型 Web 站点上部署，使他们。 标记是很好的写作实验代码或做跨浏览器媒体的发展，公司但 HTML5 媒体 API 用于一般的不太可靠。

今天，事情是不同的。 浏览器和 JavaScript 库已非常成熟，在那里你可以 — — 并且应该 — — 使用 HTML5 媒体作为默认值将显示音频和视频内容的任何项目。 甚至改造现有 Flash 和 Silverlight HTML5 播放的视频内容已成为相当简单。 在本文中，我会探索播放媒体使用 HTML5 的好处，显示了一些示例代码，解决一些重大的问题，开发商面临和提出解决这些问题的办法。

HTML5 媒体的好处

使用 HTML5 媒体您可以利用您的 HTML，CSS 和 JavaScript 的技能，而不是学习 Flash 或 Silverlight 的优势。 可以在 HTML 中创建按钮和控制它们使用 JavaScript，如果你已经知道所有你需要开发 HTML5 媒体。 HTML5 媒体具有内置的支持，为标题和字幕使用新的轨道元素和附加功能的建议 — — 如直接用于视频操作的字节访问 — — 现正考虑。

此外，使用 HTML5 视频和音频的媒体更好地发挥了如 Flash 或 Silverlight，从而延长电池使用寿命和更平滑的播放插件通过媒体执行。 此外，苹果 iOS 和 Android （以及在 Windows 8 的地铁样式浏览器） 的移动设备上运行 Windows Phone 7.5，支持只能通过 HTML5 视频和音频播放媒体。 一些 Android 设备包括 Flash，但是 Adobe 最近停止移动的闪存努力中，这意味着 HTML5 将会在未来在移动设备上播放的媒体的唯一方法。

简单的 HTML5 回放和控件

在使用 Flash 或 Silverlight 的视频播放的日子，最简单的可能标记显示视频 （在本例中为 video.mp4） 就会着这样的事：

<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
  <param name="src" value="player.swf?file=video.mp4">
  <embed src="player.swf?file=video.mp4" width="640"
    height="360"></embed>
</object>

比较这些嵌套的对象，参数和嵌入与使用相同的 h.264 编码视频播放此 HTML5 视频标记的标记：

<video src="video.mp4" controls></video>

它是简单得多 — — 只是普通的 HTML，需要很少的解释。 当浏览器下载了足够多的视频，以确定其本机的高度和宽度时，它相应地调整大小视频。 但是，就像使用 img 标签，最好始终指定的高度和宽度属性，以便在页面不需要重排。 此外可以使用样式属性指定 （我将使用两个在下面的示例中） px 或 %的宽度和高度值。

我添加的属性就是控件。 这将告诉浏览器显示其自身内置播放控制栏，通常包括播放/暂停切换、 进度指示器和音量控制。 控件是一个布尔值的属性，这意味着它不需要有一个分配给它的值。 更像 XHTML 语法，您可以编写控件 ="控制"，但浏览器总是认为是虚假的如果不是现在和真实存在时控件或分配一个值。

HTML5 介质的属性和子源标签

音频和视频的元素引入了几个新的属性，以确定如何浏览器将向最终用户现有媒体内容。

  • src 指定单个媒体文件播放 （对于多个源与不同的编码解码器，请看下面的讨论）。
  • 海报是前用户按下播放 （视频），将显示的图像的 URL。
  • 预加载确定何时以及如何浏览器将加载媒体文件使用三个可能的值：无表示视频不会下载直到用户启动播放 ； 元数据告诉浏览器下载只是足够的数据来确定高度、 宽度和媒体 ； 持续时间 汽车让浏览器决定多少要开始之前，用户下载的视频开始播放。
  • 自动播放是用来启动视频等加载页面的布尔属性 （移动设备经常忽略这个保留带宽）。
  • 循环是导致重新开始当它到达末尾的视频的布尔属性。
  • 静音是布尔属性指定是否视频应开始温和。
  • 控件是一个布尔型属性，该值指示浏览器是否应显示其自己的控件。
  • 宽度 和 高度告诉以某些大小 （仅 ； 视频显示的视频 不能是百分比）。

定时的字幕

浏览器也开始执行跟踪元素，它提供字幕，字幕，翻译和视频的评论。 这里是视频轨道的子元素的元素：

<video id="video1" width="640" height="360" preload="none" controls>
  <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>

在此示例中，我使用四跟踪元素的五个可能的属性：

  • src 是指向 Web 视频定时文本 (WebVTT) 文件或定时文本标记语言 (TTML) 文件的链接。
  • srclang 是 TTML 文件 （如 en、 专家系统或 ar） 的语言。
  • 种指示文本内容的类型：字幕、 标题、 说明、 章节或元数据。
  • 标签保存选择跟踪的用户显示的文本。
  • 默认是确定启动跟踪元素的布尔属性。

WebVTT 是一个简单的基于文本的格式，以单行宣言 （WEBVTT 文件） 开始，然后列表开始时间和结束时间以分隔--> 字符，后面两个时间之间显示的文本。 这里是一个简单的 WebVTT 文件，将在两个不同的时间间隔显示两行文字：

WEBVTT FILE

00:00:02.5 --> 00:00:05.1
This is the first line of text to display.
00:00:09.1 --> 00:00:12.7
This line will appear later in the video.

撰写本文时，只有互联网资源管理器 10 平台预览和铬 19 支持轨道的元素，但其他浏览器，可望很快这样做。 我稍后讨论的 JavaScript 库的一些将支持跟踪元素添加到浏览器尚未实现，但也有一个名为 captionator.js 的独立跟踪库 (captionatorjs.com) 解析跟踪标记，将 WebVTT 和 TTML （以及 SRT 和 YouTube SBV） 读取文件和还没有本机支持的浏览器提供一个用户界面。

脚本 HTML5 媒体

较早前，我用控件属性来告诉浏览器显示其本机控件的顶部的视频或音频的标记。 这个问题是每个浏览器都有一组不同的不太可能以匹配您的 Web 站点设计的控件。 要创建一致的体验，可以删除浏览器的控件，然后将自定义按钮添加到页面，您可以控制使用 JavaScript。 您还可以添加事件侦听器来跟踪的视频或音频播放状态。 在以下示例中，我已经删除的控件的属性，并添加的视频，作为基本控制栏下方的标记：

<video id="video1" style="width:640px; height:360px" src="video.mp4"> </video> 
<div>
  <input type="button" id="video1-play" value="Play" />
  <input type="button" id="video1-mute" value="Mute" />
  <span id="video1-current">00:00</span>
  <span id="video1-duration">00:00</span>
</div>

中的简单 JavaScript 图 1 将控制视频播放和显示当前的视频中，并将创建中所描述的完整工作播放器图 2(呈现在互联网浏览器 9）。 （注意，在 HTML5，类型 ="文本/javascript" 属性不是需要脚本标记。）

图 1 控制视频回放

<script>
// Wrap the code in a function to protect the namespace
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Toggle the mute state
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Show the duration when it becomes available
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var 
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '
0' + minutes : minutes) + ':' +
           (seconds < 10 ? '
0' + seconds : seconds);
}

})();

A Working Video Player That Shows the Time
图 2 显示的时间的视频播放器的工作

中的代码图 1 介绍播放和暂停方法、 timeupdate 和 loadedmetadata 的事件和顿了顿，结束，currentTime 和持续时间属性。 完整的 HTML5 媒体 API (w3.org/TR/html5/video.html) 包括更多，可以用于构建全面的媒体播放器。 除了，HTML5 媒体标记前面列出的属性，HTML5 媒体对象有只通过 JavaScript 可访问其他属性：

  • currentSrc 描述了使用源标签时，浏览器当前播放的媒体文件。
  • videoHeight 和 videoWidth 指示本机视频的尺寸。
  • 卷指定介于 0 和 1，指示该卷之间的一个值。 （移动设备忽略这个硬件音量控制对有利。）
  • currentTime 指示当前的播放位置，以秒为单位。
  • 持续时间是以秒为单位的媒体文件的总时间。
  • 缓冲的是一个数组，指示已下载的媒体文件的哪些部分。
  • playbackRate 的视频播放的速度 （默认值：1). 更改此号去更快 (1.5) 或更慢 （0.5）。
  • 结束指示是否该视频已达到结束。
  • 暂停视频开始播放后总是在启动，然后假为 true。
  • 寻求表示，浏览器正试图下载并移动到新位置。

HTML5 媒体对象还包括用于脚本编写下列方法：

  • 玩尝试加载和播放视频。
  • 暂停停止当前播放的视频。
  • canPlayType(type) 检测哪些浏览器支持的编解码器。 如果您发送的类型如视频/mp4，浏览器会回答的很有可能，也许，没有或空白字符串。
  • 加载被称为加载新的视频，如果您更改 src 属性。

HTML5 媒体规范提供 21 事件 ； 下面是一些最常见的：

  • loadedmetadata 已知的持续时间和尺寸时激发。
  • loadeddata 时，浏览器可以播放当前的位置上触发。
  • 玩视频不再是暂停或结束时启动视频。
  • 玩播放已暂停、 缓冲或寻求后启动时激发
  • 暂停视频将暂停。
  • 结束的视频结尾时激发。
  • 进展指示已下载更多的媒体文件。
  • 寻求浏览器已开始寻求时如此。
  • 缉为 false 时，浏览器已完成寻求。
  • timeupdate 激发起媒体资源。
  • volumechange 火灾时静音或卷属性已更改。

这些属性、 方法和事件是展示给用户丰富的媒体体验，所有驱动的 HTML，CSS 和 JavaScript 功能强大的工具。 在基本示例中图 1，我第一次在页上创建的所有元素的变量：

// Find the DOM objects
var video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
  duration = document.getElementById("video1-duration");

然后我将 click 事件添加到我的按钮控制播放媒体。 我在这里切换播放和暂停视频的状态，并更改该按钮上的标签：

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
      video.play();
      playBtn.value = "Pause";
  } else {
      video.pause();
      playBtn.value = "Play";
  }
}, false);

最后，我将事件添加到跟踪其当前状态的媒体对象。 在这里，我听 timeupdate 事件和更新到当前时间的播放头，控制栏的秒数分钟: 秒样式的格式：

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

HTML5 媒体的问题

不幸的是，HTML5 媒体跨所有浏览器和设备工作不这么简单，在我的示例。 我已经提到并不是所有的浏览器支持的轨道元素，和现在将使用的音频和视频的标记时，您会遇到的三个其他问题一起解决办法。 在文章的末尾，我将介绍一些包装所有这些解决方案到单一的、 可以方便地部署软件包的 JavaScript 库。

HTML5 音频和视频编解码器支持时使用 HTML5 媒体发展所面临的第一个问题就是不一致支持视频和音频编码解码器。 我的示例工作互联网资源管理器 9 和以后，Chrome 和 Safari，，但他们不会在 Firefox 或歌剧工作因为这些浏览器支持 HTML5 视频标签，尽管它们不支持 h.264 编解码器。 由于到版权问题，浏览器厂商有分成两大阵营的编解码器，和我们将熟悉的 HTML5 媒体图，在图 3，显示哪些编解码器使用哪个浏览器。

图 3 在各种浏览器中的编解码器支持

Video IE8 IE9 + 镶边 Safari 盧动 火狐 歌剧
MP4 (h.264/AAC) no 是 是 是 是 no no
WebM (VP8/Vorbis) no 安装 是 no no 是 是

 

Ie 浏览器 9++、 野生动物园、 铬和移动设备 （iPhone、 iPad，Android 2.1 + 和 Windows Phone 7.5 +） 支持 h.264 视频编解码器，通常放置在 MP4 的容器。 火狐和歌剧，相比之下，支持 VP8 视频编解码器，并置于 WebM 货柜内。 Chrome 也支持 WebM，并承诺将删除某个时刻 h.264 支持。 Ie 浏览器 9++ 可以呈现 WebM 如果由最终用户已安装编解码器。 最后，Firefox、 歌剧和 Chrome 也支持 Theora 编解码器放置在 Ogg 容器内，但这很大程度上逐步 WebM 对有利 （除非您需要支持 Firefox 3.x），所以我已经将它的图表和简单的例子。

对于音频，浏览器厂商被再次拆分为两个阵营，与第一组 （互联网资源管理器 9、 铬和 Safari） 支持熟悉的 MP3 格式和第二组 （Firefox 和歌剧） 支持的 Vorbis 编解码器，Ogg 货柜内。 许多浏览器也可以发挥的 WAV 文件格式。 参见图 4。

图 4 在各种浏览器中的音频支持

Audio IE8 IE9 + 镶边 Safari 盧动 火狐 歌剧
MP3 no 是 是 是 是 no no
Ogg Theora no 安装 是 no no 是 是
WAV no no 也许 是 是 是 是

 

为应对这些差异，视频和音频标签支持多子源标签，可以让浏览器选择他们可以播放媒体文件。 每个源元素具有两个属性：

  • src 指定的媒体文件的 URL。
  • 类型指定 mime 类型，也可以选择特定的编码解码器的视频。

提供 h.264 和 VP8 视频编解码器，请使用以下标记：

<video id="video1" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

请注意较早版本的 iOS 和 Android 需要先列出的 MP4 文件。

此标记将在所有现代浏览器中工作。 JavaScript 代码会控制浏览器决定哪种视频可以播放。 对于音频，标记看起来像这样：

<audio id="audio1">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.oga" type="audio/oga">
</audio>

如果您正在托管在您自己的服务器上的音频或视频内容，您必须具有正确的 MIME 类型，为每个媒体文件或许多 HTML5 准备浏览器 （如 Ie 和火狐） 不会播放的媒体。 在 IIS 7 中添加 MIME 类型，请转到功能视图中，双击 MIME 类型、 单击添加按钮，在操作窗格中的、 添加的扩展名 （mp4） 和 MIME 类型 （视频/mp4） 和然后按确定。 然后执行相同计划为其它类型 （或者说和视频/webm） 使用。

支持旧版浏览器包括两个媒体文件 （如 MP4 和 WebM 视频) 使所有现代浏览器中的 HTML5 媒体工作。 但当旧的浏览器 （例如，互联网资源管理器中 8） 时遇到视频标签，他们无法显示视频。 他们会，但是，呈现 HTML 放在 <video> 的开放之间 和关闭 </video> 标记。 下面的示例包含一条消息，要求用户获取更新的浏览器：

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Please update your browser</p>
</video>

要允许非 HTML5 就绪的浏览器的访问者播放视频，您可以提供与嵌入 Flash 播放相同的 MP4 您提供互联网资源管理器 9、 Safari 和铬，如中所示的替代方案图 5。

图 5 视频播放 flash

 

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object width="640" height="360" classid="clsid:
    d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
      "http://fpdownload.macromedia.com/pub/
      shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="player.swf?file=video.mp4">
        <embed src="player.swf?file=video.mp4" width="640"
          height="360"></embed> 
        <p>Please update your browser or install Flash</p>
  </object>
</video>

此标记提供了一些方法来播放视频的所有浏览器。 浏览器 HTML5 和 Flash 都不会看到一条消息，要求他们升级。 如何和为什么此嵌套的标记工作的详细信息，请参阅 Kroc 卡门"视频为大家"(camendesign.com/code/video_for_everybody)。

这种方法有一些缺点，但是。 首先，有大量的标记以维持。 第二，你要进行编码并存储至少两个媒体文件。 与第三，你向页中添加任何 HTML/JavaScript 控件将不使用嵌入的 Flash 播放器。 稍后，我会建议可帮助您克服这些问题，但首先，让我们来解决最后一个问题的几个 JavaScript 库。

全屏支持 Flash 和 Silverlight 包括全屏幕模式，允许用户观看视频和他们整个屏幕上的其他内容。 您可以通过创建一个简单的按钮，并把这种 (Flash) 为 ActionScript 或 C# （用于 Silverlight） 全屏命令来实现此功能。

今天的浏览器都有类似的全屏模式的用户可以使用键盘或菜单命令 （经常 f11 键或 Ctrl + F） 触发。 但是直到最近，没有等效的 JavaScript API 允许开发者，启动全屏幕模式，从页上的按钮。 这就意味着可以显示 HTML5 视频仅在"完整窗口"填充浏览器窗口，但不是整个屏幕。

在 2011 年底，Safari、 铬和 Firefox 增加支持 W3C 建议全屏的 API，提供了类似于 Flash Silverlight 的功能。 Opera 团队目前正在对它执行的但互联网资源管理器中的团队，撰写本文时，尚未决定是否将执行 API。 在 Windows 8 的地铁样式浏览器将全屏默认情况下，但桌面浏览器用户将需要输入全屏幕模式下手动使用菜单选项或 F11 键。

在支持它的浏览器中输入全屏模式，您可以调用 requestFullscreen 方法将元素上的显示全屏。 要退出全屏显示的命令是在文档对象上调用的：document.exitFullscreen 方法。 W3C 建议仍然是进展中的工作，所以我就不去更多的细节在这里，但我在我的博客跟踪 API 的状态：bit.ly/zlgxUA。

HTML5 视频和音频 JavaScript 库

通过将所有相关的代码集成到单个软件包的开发人员的数目已更容易创建使 HTML5 视频和音频的 JavaScript 库。 一些最开放源码库是 MediaElement.js，jPlayer，VideoJS、 Projekktor、 Playr 和 LeanBack。 你会发现与在比较功能的完整列表 praegnanz.de/html5video。

您需要做的就是提供视频或音频的标签和库会自动生成一组自定义的控件，以及插入浏览器不支持 HTML5 媒体的 Flash 播放器。 唯一的问题是许多图书馆插入的 Flash 播放器不要总是看或功能类似 HTML5 的球员。 这意味着，您添加的任何 HTML5 事件不会使用 Flash 播放器和您使用的任何自定义 CSS 就看不到，要么。

在我自己的工作中，我被要求创建一个 HTML5 视频播放器同步的幻灯片和成绩单 （请参见 online.dts.edu/player 演示）。 我们现有的库的多个 3,000 h.264 视频文件，它被当作转码并不可行他们 WebM 火狐和歌剧。 我们还需要支持较旧的浏览器，如互联网资源管理器中 8，但单独的备用 Flash 不会工作，因为它不会对幻灯片和成绩单的事件作出响应。

为了克服这些困难，我创建了一个提到的球员以前称为 MediaElement.js （mediaelementjs.com)。 它是开放源代码 （麻省理工学院/GLPv2） 的 JavaScript 库，包括特别模仿 HTML5 API 的 Flash 和 Silverlight 的球员。 完全是另外的 Flash 播放器，而不是 MediaElement.js 使用 Flash 只呈现视频，然后换行视频，看起来就像 HTML5 API 的 JavaScript 对象。 这有效地升级所有的浏览器，所以他们可以使用的视频标签和额外本身不支持的编解码器。 要使用 jQuery 的单个 h.264 文件与启动播放机，您需要下面的代码：

<video id="video1" width="640" height="360" src="video.mp4" controls></video>
<script>
jQuery(document).ready(function() {
  $("video1").mediaelementplayer();
});
</script>

对于不支持的视频的标记 （如互联网资源管理器中 8），还是那些不支持 h.264 （Firefox 和歌剧） 的浏览器，MediaElement.js 将插入闪存 （或 Silverlight，取决于用户已安装）"提升"这些浏览器所以他们获得的 HTML5 介质属性和事件，我已经介绍垫片。

对于音频支持，您可以使用单个 MP3 文件：

<audio id="audio1" src="audio.mp3" controls></audio>

或者，您可以包含单个 Ogg/Vorbis 文件：

<audio id="audio1" src="audio.oga" controls></audio>

再次，对于不支持音频的标记 （互联网资源管理器中 8） 的浏览器或那些不支持 Ogg/Vorbis （Internet Explorer 9++ 和 Safari），MediaElement.js 将插入 shim"提升"这些浏览器，所以他们都起作用，如果他们本身支持的编解码器。 （注：Ogg/Vorbis 不会可在移动设备上播放。）

MediaElement.js 还支持跟踪元素，以及本机全屏幕模式下对浏览器的 JavaScript API 实施了。 您可以添加您自己的 HTML5 事件或跟踪属性，它将每个浏览器和移动设备中工作。

我希望我已经给你们，尽管几个怪癖，HTML5 视频和音频的元素，特别是当我建议的优秀图书馆与配对是轻松地添加到现有的 Web 站点，应任何新项目的默认值。

约翰 · 戴亚 为达拉斯神学院 (dts.edu) 是 Web 开发的总监。在他的博客 j.hn。

多亏了以下技术专家，检讨这篇文章： 约翰 · 赫尔瓦廷 和 布兰登 Satrom