html5播放视频代码

HTML5 规定了一种通过 <video> 元素来包含视频的标准方法。在 HTML5 中，<video> 元素目前支持三种格式的视频文件：

1. Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
2. MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
3. WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。

在 HTML5 中显示视频的基本示例

以下是一个简单的示例代码，用于在 HTML5 中显示视频：

<video src="demo.mp4" width="500" height="250" controls="controls">
您的浏览器不支持此种视频格式。
</video>

下面对 <video> 元素中各属性的含义进行详细解释：

• width 和 height：分别用于设置视频播放器的宽度和高度，这两个属性比较直观，在此不再赘述。
• controls：该属性用于向用户显示视频播放的控件，如播放按钮、暂停按钮、音量调节按钮等。当浏览器支持 <video> 元素时，用户可以通过这些控件来操作视频的播放。
• <video> 元素中间插入的文本（如“您的浏览器不支持此种视频格式。”）：当用户的浏览器不支持所指定的视频格式时，这段文本将显示给用户，起到提示作用。

不同浏览器对视频格式的支持情况

不同的浏览器对视频格式的支持有所不同，需要特别注意：

• Safari 浏览器：只支持 MP4 类型的视频文件。
• Firefox、Opera 以及 Chrome 浏览器：支持 Ogg 格式的视频文件。
• Internet Explorer 8：不支持 <video> 元素。
• IE 9：将提供对使用 MPEG4 的 <video> 元素的支持。

处理浏览器兼容性问题

如果不确定用户的浏览器支持哪种格式的视频，可以采用以下方法：

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>

<video> 元素允许多个 <source> 元素。每个 <source> 元素可以链接不同的视频文件，浏览器会按照 <source> 元素的顺序，使用第一个它能够识别的视频格式进行播放。因此，我们只需准备几个不同格式的视频文件，就能提高视频在不同浏览器中的兼容性。

<video> 标签的常用属性

下面介绍几个 <video> 标签的常用属性：

1. autoplay：当该属性出现时，意味着视频在就绪后将自动播放。用法示例：autoplay="autoplay"。
2. controls：出现该属性意味着向用户显示控件，如播放按钮、暂停按钮、音量调节按钮等。用法示例：controls="controls"。
3. height：用于设置视频播放器的高度。
4. width：用于设置视频播放器的宽度。
5. loop：设置该属性后，视频将自动重播。用法示例：loop="loop"。
6. preload：该属性用于设置视频在页面加载时的加载方式，有以下三种取值：
   • auto：当页面加载后载入整个视频。
   • meta：当页面加载后只载入视频的元数据（如视频时长、分辨率等）。
   • none：当页面加载后不载入视频。

需要注意的是，若使用了 autoplay 属性，则 preload 属性将被忽略。

7. src：用于指定要播放视频的 URL。

如果想了解如何检测浏览器支持的视频格式，可以查看另一篇博文。