HTML 视频

HTML5 引入了 <video> 元素，用于在网页中嵌入视频文件，提供了无需插件（如 Flash）的方式进行视频播放。<video> 标签不仅支持播放视频文件，还提供了控制功能，比如播放、暂停、音量控制、全屏等，能够为用户带来更加流畅的多媒体体验。

1. 基本语法

<video width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">  您的浏览器不支持视频播放。</video>php154 Bytes© 菜鸟-创作你的创作

• <video>：这是视频元素的容器，用来嵌入视频文件。
• controls：显示视频控件，允许用户控制视频的播放、暂停、音量等。
• width 和 height：设置视频的显示宽度和高度。
• <source>：指定视频文件的路径和类型。通过 type 属性指定视频的 MIME 类型（例如 video/mp4、video/ogg）。
• fallback content：如果浏览器不支持 <video> 元素，提供备用内容（例如文本提示或其他方法）。

2. 常用属性

• autoplay：视频在加载完成后自动播放。
• loop：视频播放结束后自动重新开始（循环播放）。
• muted：视频初始静音。
• poster：视频的封面图像。视频加载前或无法播放时显示的静态图片。
• preload：指定视频的预加载方式。
  • preload="auto"：浏览器会自动加载整个视频文件。
  • preload="metadata"：仅加载视频的元数据（如时长、尺寸等）。
  • preload="none"：不加载视频文件，直到用户点击播放。

示例：使用 autoplay 和 loop 属性

<video width="320" height="240" controls autoplay loop>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">  您的浏览器不支持视频播放。</video>php168 Bytes© 菜鸟-创作你的创作

• 视频将在页面加载时自动播放并循环播放。

3. 提供多种视频格式

不同浏览器支持不同的媒体格式。为了确保视频能够在大多数浏览器中播放，可以提供多种格式的视频文件。常见的视频格式包括：

• MP4 (video/mp4)：广泛支持，适用于大多数浏览器，尤其是 Chrome 和 Safari。
• OGG (video/ogg)：开源格式，支持 Firefox、Chrome 和 Opera。
• WebM (video/webm)：主要支持 Chrome、Firefox 和 Opera。
• AVI、MOV、WMV 等：虽然支持较少，但依然是某些平台常见的格式。

示例：提供多个视频格式

<video width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">  <source src="movie.webm" type="video/webm">  您的浏览器不支持视频播放。</video>php200 Bytes© 菜鸟-创作你的创作

• 浏览器将根据它的支持情况选择合适的格式播放视频。

4. 事件和 JavaScript 控制

HTML5 <video> 元素为开发者提供了 JavaScript 控制接口，使得视频播放、暂停、进度更新等功能可以通过编程进行控制。

常用事件：

• play：视频开始播放时触发。
• pause：视频暂停时触发。
• ended：视频播放结束时触发。
• timeupdate：每当视频的播放时间更新时触发。
• volumechange：音量变化时触发。

示例：通过 JavaScript 控制视频

<video id="myVideo" width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4"></video><button onclick="document.getElementById('myVideo').play()">播放</button><button onclick="document.getElementById('myVideo').pause()">暂停</button><button onclick="document.getElementById('myVideo').currentTime += 10">快进 10 秒</button><button onclick="document.getElementById('myVideo').currentTime -= 10">快退 10 秒</button>php428 Bytes© 菜鸟-创作你的创作

• 通过 play() 和 pause() 方法控制视频的播放和暂停。
• 通过 currentTime 属性控制视频的播放位置，单位为秒。

5. 视频全屏和响应式设计

全屏

浏览器允许通过 JavaScript 使视频切换到全屏模式。现代浏览器提供了 requestFullscreen() 方法，使得开发者可以控制视频元素进入全屏模式。

<video id="myVideo" width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4"></video><button onclick="document.getElementById('myVideo').requestFullscreen()">全屏</button>php192 Bytes© 菜鸟-创作你的创作

响应式设计

为确保视频在各种屏幕尺寸下能够适应，可以使用 CSS 来使视频元素响应式，填满父容器。

video {  width: 100%;  height: auto;}php40 Bytes© 菜鸟-创作你的创作

• 这段 CSS 使视频的宽度始终填满容器，并自动调整高度以保持宽高比。

6. 视频嵌入与外部链接

除了直接嵌入视频文件，您还可以通过 <iframe> 标签嵌入来自外部平台（如 YouTube、Vimeo）的在线视频。

嵌入 YouTube 视频示例

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>php202 Bytes© 菜鸟-创作你的创作

• 通过 <iframe> 嵌入来自 YouTube 的视频，allowfullscreen 属性允许用户切换到全屏模式。

7. 视频的可访问性

为了提高网页的可访问性，视频内容可以配合 字幕、描述 等辅助信息一起使用。可以通过 track 元素为视频提供字幕或描述。

添加字幕

<video width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4">  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">  您的浏览器不支持视频播放。</video>php189 Bytes© 菜鸟-创作你的创作

• <track> 元素为视频提供字幕、描述或章节等。
• kind 属性指定字幕类型，可以是 subtitles（字幕）、captions（隐形字幕）、descriptions（视频描述）等。
• srclang：指定字幕的语言。
• label：字幕的标签，通常显示在用户界面中。

8. 总结

• <video> 元素使得在网页中嵌入视频变得简单且无需插件支持。
• 可以通过 controls、autoplay、loop 等属性控制视频的播放行为。
• 提供多种格式支持（如 MP4、OGG、WebM）确保兼容性。
• 可以通过 JavaScript 控制视频的播放、暂停、音量、进度等。
• 使用 <track> 元素添加字幕、描述和章节，提升可访问性。

HTML5 视频功能强大，适合各种多媒体应用，包括教育视频、娱乐、广告和更多。在现代网页中，视频已经成为一种常见的内容展示方式。https://www.52runoob.com/archives/5101