当前位置：首页 > news >正文

HTML5 Video（视频）学习笔记

news 来源：原创 2025/6/26 21:21:57

一、HTML5 视频简介

HTML5 引入了 <video> 元素，用于在网页上嵌入视频内容。这种方式取代了传统的 Flash 插件，使得视频的展示更加标准化和便捷。HTML5 的 <video> 元素为开发者提供了一种简单且兼容性强的方法来嵌入视频，同时也支持多种视频格式。

二、浏览器支持情况

Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 元素。
注意：Internet Explorer 8 或更早版本不支持 <video> 元素。

三、基本用法

1. 基本语法

在 HTML5 中嵌入视频的基本语法如下：

HTML复制

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 Video 标签。
</video>

预览

<video> 元素提供了播放、暂停和音量控件来控制视频。
width 和 height 属性用于控制视频的尺寸。如果设置了这些属性，浏览器会在页面加载时保留所需的视频空间，避免页面因视频加载而改变布局。
<video> 标签之间插入的内容是为不支持 <video> 元素的浏览器提供的备用内容。

2. 支持的视频格式

目前，<video> 元素支持三种视频格式：

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

不同浏览器对这些格式的支持情况如下表所示：

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

3. 视频格式的 MIME 类型

格式	MIME 类型
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

四、使用 DOM 控制视频

<video> 元素支持多种方法、属性和事件，可以通过 JavaScript 进行控制。例如：

方法：play()、pause() 等，用于控制视频的播放和暂停。
属性：paused、width 等，可以读取或设置视频的状态和尺寸。
事件：play、pause 等，可以监听视频的播放和暂停事件。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 控制 <video> 元素：

HTML复制

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 Video 标签。
</video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>

<script>
  function playVideo() {
    document.getElementById("myVideo").play();
  }

  function pauseVideo() {
    document.getElementById("myVideo").pause();
  }
</script>

预览

五、相关标签

1. `<source>` 标签

<source> 标签用于定义多种媒体资源，例如 <video> 和 <audio>。它可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

2. `<track>` 标签

<track> 标签用于定义在媒体播放器中的文本轨迹，例如字幕、章节等。

六、总结

HTML5 的 <video> 元素为网页视频展示提供了一种简单、标准化的方法。通过合理使用 <video> 元素及其相关属性和方法，可以轻松地在网页上嵌入视频，并实现丰富的交互功能。同时，了解不同浏览器对视频格式的支持情况，可以帮助我们更好地选择合适的视频格式，确保视频在不同浏览器中都能正常播放。