video

摘要

video 标签表示嵌入的视频

Overview Table

DOM Interface: HTMLVideoElement

HTML 属性

autoplay = “autoplay” 或 “” (空字符串) 或为空
指示 UA 在可以不停止的情况下自动开始播放视频。
preload = “none” 或 “metadata” 或 “auto” 或 “” (空字符串) 或为空
表示 UA 关于是否值得乐观地下载视频本身或其元数据的提示。
- "none": 提示 UA 用户预计不需要视频，或者最小化不必要的流量是可取的。
- "metadata": 提示 UA 用户预计不需要视频，但获取其元数据（尺寸、第一帧、轨道列表、持续时间等）是可取的。
- "auto": 提示 UA 乐观地下载整个视频是可取的。
  指定空字符串等同于指定值 "auto"。
controls = “controls” 或 “” (空字符串) 或为空
指示 UA 暴露一个用户界面来控制视频播放。
loop = “loop” 或 “” (空字符串) 或为空
指示 UA 在到达视频结尾时返回到视频的开头。
poster = URL，可能被空格包围
UA 在没有视频数据可用时显示的图像文件的地址。
height = 非负整数
视频的高度，以 CSS 像素为单位。
width = 非负整数
视频的宽度，以 CSS 像素为单位。
muted = “muted” 或 “” (空字符串) 或为空
表示视频的音频通道的默认状态，可能覆盖用户偏好。
mediagroup = 字符串
指示 UA 将多个视频和/或音频流链接在一起。
src = URL，可能被空格包围
视频的 URL。

无需插件的本地视频播放

支持 HTML5 视频的浏览器将无需外部插件即可播放媒体。

视频格式由 视频流 + 音频流 组成。

HTML5 视频的三种常见格式是：MP4、WebM 和 OGG Vorbis。

.mp4 = H.264 + AAC
.ogg = Theora + Vorbis
.webm = VP8 + Vorbis

服务器 MIME 类型

除了声明多个编码之外，还需要指示 Web 服务器 MIME 类型与 co 的关联

请参阅 MIME 类型以获取有关 MIME 类型的更多信息，以及在服务器上设置 MIME 类型以获取有关服务器设置以提供 HTML5 音频和视频内容的更多信息。

属性

属性（controls、preload、loop）位于 <video> 标签内，以更改嵌入视频的行为。

旧浏览器怎么办？

有几种技术可以确保人们能够访问我们创建的内容。其中两种在此处介绍：Chrome Frame 和 Flash Fallback

Chrome Frame

[Frame] 是一个 Internet Explorer（最多版本 8）的插件，它将允许旧浏览器像原生支持这些功能一样使用 HTML5 内容（不仅仅是视频和音频）。

Flash 回退

当浏览器不支持提供的任何格式时，您还可以使用 flash 作为回退。Flash 支持 H264，并且 Adobe 承诺在其 flash 播放器中支持 WebM 格式，尽管该时间表尚不清楚。与 Chrome Frame 插件相比，使用 Flash 的最大缺点是您将获得 flash 播放器界面，而不是为视频标签构建的任何 UI。

<video width="320" height="240" controls="controls" preload="none">
  <source src="movie.mp4" type="video/mp4"/>
  <source src="movie.ogg" type="video/ogg"/>
  <source src="movie.webm" type="video/webm"/>
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240"/>
  </object>
</video>

可访问性

作者应确保信息和用户界面组件必须以用户可以感知的方式呈现 (WCAG 2.0 - 原则 1：可感知)。这包括为时基媒体提供替代方案指南 1.2。

HTML5 中仍在进行中的适当技术支持工作。

格式和编解码器

HTML5 规范并不要求所有用户代理都支持视频编解码器。因此，需要提供替代源以确保现有用户代理中的良好用户体验。使用 Ogg/Theora/Vorbis 和 MP4/H.264/AAC 似乎涵盖了大多数情况（如果不是全部）。但是，Ogg/Theora/Vorbis 正在被 WebM 取代。请参阅维基百科浏览器支持表。

流媒体

HTML5 规范没有指定特定的流媒体方法。预计至少支持 HTTP 1.1 渐进式流媒体。自适应/实时流媒体可以作为 UA 扩展支持。有关示例，请参阅 Apple 的 HTTP 直播概述。

数字版权管理

HTML5 规范没有指定特定的数字版权管理 (DRM) 方法。预计至少支持没有 DRM 的视频。DRM 可以作为 UA 扩展支持。

示例

所需的视频文件应位于 src 属性中。作为最佳实践，您还应包含 controls 属性以显示播放和音量控制。


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

HTML5 视频标签可以支持不同的编码


<video>
            <source src="video.mp4" type="video/mp4" />
            <source src="video.webm" type="video/webm" />
            <source src="video.ogg" type="video/ogg" />
            Your browser does not support the <code>video</code> element.
            You can download it <a href="video.webm">here</a>.
</video>

查看实时示例

参见

视频

外部资源

[视频章节] 来自 Dive into HTML5

署名

Microsoft Developer Network: [Windows Internet Explorer API 参考文章]