HTML5

项目
07/08/2015

使用 HTML5 中的媒体

张森 Beres

除非您有已生活上远程岛在过去一年左右，您可能听说过的热门话题和谈 HTML5。否，HTML5 没有作出纠正大多数疾病，也不能将结束世界游行，但它已准备好重新调整富 Internet 应用程序环境的形状。与所有的宣传上的新的 HTML 标准，务必使回向下 earth 的讨论。下面是您需要了解有关此新的 HTML 规范的重要事实数据：

HTML5 是从 1999 年起的规范的第一个新版本 — Web 已从那时起了很多更改。
HTML5 将 HTML、 XHTML 和 HTML DOM 的新标准
HTML5 提供的播放媒体的标准方法 — — 一个密钥的益处，因为没有任何标准，而无需浏览器插件，并不能保证每个浏览器是否支持该插件在网页中播放媒体。
HTML5 仍然是正在进行的工作，但大多数的现代的浏览器有一些 HTML5 标记支持。

Microsoft Silverlight 1.0 发货在 2007 年时, 作为主要的功能，并作为主要理由作为 Flash 的替代方法，请参阅 Silverlight 吹捧其视频和音频播放 — — 这在一个版本或 95%的全球范围内的浏览器上的另一个受支持。在撰写本文时，Silverlight 支持大约 75%的浏览器世界各地，或每四台计算机中的大约三个。但如果您要播放的媒体，并且您不想麻烦或插件的从属关系，HTML5 是答案。

若要查看播放的媒体使用 HTML5 视频标记和传统的对象标记之间的差异，请考虑中的示例图 1。

图 1 与视频的 HTML 标记。要播放的媒体的对象标记

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

那么什么是大不了？这两个示例是简单、易于实施。但重要的一点是，因为 <video> 标记是一种标准，将有毫无疑问，它应该是用来播放媒体。您不必猜到浏览器是否具有某些特定插件的安装版本播放媒体。标准的部分是什么已从 HTML 丢失。

在 HTML5 中受支持的媒体格式

要在您下一步的 HTML5 应用程序中使用媒体，您需要知道支持哪些格式。 HTML5 支持 AAC、 MP3 和音频的 Ogg Vorbis 和 Ogg Theora、 WebM 和 mpeg-4 视频。

即使 HTML5 支持这些媒体格式，但是，不是每个浏览器支持每种格式。 图 2 显示了当前的浏览器和它们所支持的媒体格式。

图 2 在当前浏览器中的媒体支持

使用视频标签

要在 HTML5 页中播放视频，只需使用 <video> 标记，如下所示：

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

Src 属性（http://www.w3.org/TR/html5/video.html#the-source-element）或多个视频的名称设置为播放和控件的布尔交换机规定，是否默认回放控件显示。您还可以使用其他两个布尔属性 — 自动播放和循环 — 设置视频标记时。 图 3 列出每个属性的属性及其值。

图 3 视频标记属性

Attribute	值	说明
音频	静音	定义音频的默认状态。目前，只有静音允许的。
自动播放	自动播放	如果存在的话，视频开始播放只要它已准备好。
控件	控件	添加播放、暂停和音量控制。
高度	像素为单位）	设置视频播放器的高度。
Loop	Loop	如果存在的话，视频将重新开始每次完成。
海报	url	指定表示视频的图像的 URL。
预先载入	预先载入	如果有，视频是在页加载已加载并准备运行。如果存在，则自动播放，它将被忽略。
Src	url	播放视频的 URL。
宽度	像素为单位）	设置视频播放器的宽度。

下面的代码演示几个的一种常见的情况，包括设置高度和宽度的视频播放机上的关键属性，暂停自动播放、循环和控件属性，则会显示播放和音量控制以及回退的错误消息。

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

也可以设置特定 MIME typeusing 的 type 属性和编解码器源元素中。这些示例使用 type 属性设置的 MIME 类型和介质的编码：

<!-- 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"'>

您可以在 HTML 或 JavaScript 中设置属性。下面的代码演示如何在 HTML 和 JavaScript 中设置布尔型控件属性。

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

当您不知道浏览器是否将呈现页面时，您需要回退机制来播放媒体。您只需将列出已呈现中，视频的视频格式，并在浏览器播放它支持的第一个。您也可以添加文本作为最后的手段，让用户知道正在使用的浏览器不支持本机 HTML5 视频播放。下面的代码包含多个视频源，以及一个备用的消息，指示没有 HTML5 支持。

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

如果您希望确保您的视频播放，可以包含对象标记播放 Flash 版本，如下所示：

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

您还可以检查是否受一种视频格式，如下所示检查 canPlayType 属性，使用 JavaScript：

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

如果想要做一些简单的备用文本相比更有意义，您可以使用 onerror 事件监听器传递到错误：

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

使用海报属性，可以指定要显示在窗体上的视频的位置的图像的 URL。通常要显示的视频列表或单个视频上窗体中，以便让图像的形式显示的视频预览的简便方法提供了更好的用户体验。下面是在操作中的海报属性：

<video src="video1.mp4" poster="preview.jpg" </video>

最后，通过使用一些 JavaScript 和基本的 HTML，您可以创建更加互动的视频播放器。 图 4 演示如何使用 JavaScript 表单中添加视频播放器以及如何响应用户输入到控件。

图 4 交互在 JavaScript 中的视频

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

有关事件和播放视频的功能的完整列表，签出此部分中的规范在 http://www.w3.org/TR/html5/video.html#playing-the-media-resource。

使用音频标记

使用音频标记非常类似于使用 video 标签：您将一个或多个音频文件传递给该控件，然后就会播放该浏览器支持的第一个。

<audio src="audio.ogg" controls>
 Your browser does not support the audio element.
</audio>

图 5 列出了可用的音频的标记中的属性。该控件不需要显示视频播放器，类似，因此属性（如高度、宽度和海报将不包括在内。

图 5 音频标记属性

Attribute	值	说明
自动播放	自动播放	如果存在的话，音频将开始播放只要它已准备好。
控件	控件	显示控件，如播放按钮。
Loop	循环	（如果存在）（循环）音频开始重新播放时到达结尾。
预先载入	预加载	如果存在的话，音频装在页加载，并已准备好运行。如果存在，则自动播放，它将被忽略。
Src	url	播放音频的 URL。

在与视频的标记，您可以将多个文件传递给音频的标记，并将播放第一个受支持的。当浏览器不支持音频的标记，这样，还可以使用备用的消息：

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

摘要

HTML5 是为 Web、下一个标准，具体取决于您目标的浏览器，您可以开始使用的某些新的标签，如音频和视频，稍后再试。当使用 HTML5，但是，因为不是每个浏览器支持新的标记，并且即使存在，也可能不支持每种媒体格式，请务必谨慎。如果您正在使用现代的浏览器支持 HTML5，您仍然需要执行额外的工作来处理您的媒体，以确保用户成功的所有格式。下面是一些极好的 Web 资源，它们提供浏览器支持信息，以及您需要确保 HTML5 媒体成功的所有其他信息：

张森 Beres 是产品管理副总裁、社区和推广在 Infragistics 和 spearheads 客户驱动的、具有创新意义的特性和功能在整个 Infragistics 的所有产品。张森是一个 Microsoft。NET MVP，是活动的成员。NET 社区。他每年讲述几十个事件和全球范围内的会议。他是八个主题从 Visual Basic 和 C# 到 SQL Server 和 Silverlight ；书籍的作者他的最新版本是专业 Silverlight 4 （Wrox，2010年）。您可以访问在张森 jasonb@infragistics.com 或 twitter @ jasonberes 上。

通过