＜video＞` 和 `＜audio＞` 标签的常用属性解析

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• `
• • 一、引言
  • [二、`<video>` 和 `<audio>` 标签的基本用法](#二、<video> 和 <audio> 标签的基本用法)
  • • [（一）`<video>` 标签](#（一）<video> 标签)
    • [（二）`<audio>` 标签](#（二）<audio> 标签)
  • 三、常用属性
  • • （一）`autoplay`
    • （二）`loop`
    • （三）`muted`
    • （四）`preload`
    • [（五）`poster`（仅适用于 `<video>`）](#（五）poster（仅适用于 <video>）)
    • （六）`controlsList`
  • 四、支持多种格式的多媒体文件
  • [五、使用 JavaScript 控制多媒体播放](#五、使用 JavaScript 控制多媒体播放)
  • • （一）播放和暂停
    • （二）设置音量
    • （三）监听播放事件
    • （四）动态切换播放源
  • 六、实际应用场景
  • • （一）在线教育平台
    • （二）音乐播放器
    • （三）视频广告
  • 七、总结

`

一、引言

在现代网页开发中，多媒体内容（如视频和音频）的嵌入变得越来越常见。HTML5 提供了 <video> 和 <audio> 标签，使得在网页中嵌入多媒体文件变得简单而高效。这些标签不仅支持多种格式的多媒体文件，还提供了丰富的属性和方法，用于控制多媒体的播放、显示和交互。本文将详细介绍 <video> 和 <audio> 标签的常用属性，帮助开发者更好地理解和使用这些标签。

二、<video> 和 <audio> 标签的基本用法

（一）<video> 标签

<video> 标签用于嵌入视频文件。基本语法如下：

<video src="movie.mp4" controls>
  您的浏览器不支持 video 标签。
</video>

• src 属性：指定视频文件的路径。
• controls 属性：显示默认的播放控制工具（如播放、暂停、音量调节等）。

（二）<audio> 标签

<audio> 标签用于嵌入音频文件。基本语法如下：

<audio src="audio.mp3" controls>
  您的浏览器不支持 audio 标签。
</audio>

• src 属性：指定音频文件的路径。
• controls 属性：显示默认的播放控制工具（如播放、暂停、音量调节等）。

三、常用属性

（一）autoplay

• 作用：自动播放多媒体文件。

• 取值 ：布尔值（autoplay 或省略）。

• 示例 ：

  <video src="movie.mp4" controls autoplay>
    您的浏览器不支持 video 标签。
  </video>

• 解释 ：设置 autoplay 属性后，视频或音频将在页面加载完成后自动播放。但请注意，许多现代浏览器出于用户体验和性能考虑，对自动播放功能进行了限制，通常只有在用户与页面交互（如点击）后才会允许自动播放。

（二）loop

• 作用：使多媒体文件循环播放。

• 取值 ：布尔值（loop 或省略）。

• 示例 ：

  <audio src="audio.mp3" controls loop>
    您的浏览器不支持 audio 标签。
  </audio>

• 解释 ：设置 loop 属性后，视频或音频将在播放结束后自动重新开始播放。

（三）muted

• 作用：静音播放多媒体文件。

• 取值 ：布尔值（muted 或省略）。

• 示例 ：

  <video src="movie.mp4" controls muted>
    您的浏览器不支持 video 标签。
  </video>

• 解释 ：设置 muted 属性后，视频或音频在播放时将默认静音。用户可以通过控制工具手动取消静音。

（四）preload

• 作用：控制多媒体文件的预加载行为。

• 取值 ：

  • auto：自动预加载整个文件。
  • metadata：仅预加载元数据（如时长、尺寸等）。
  • none：不预加载任何内容。

• 示例 ：

  <video src="movie.mp4" controls preload="metadata">
    您的浏览器不支持 video 标签。
  </video>

• 解释 ：preload 属性用于优化多媒体文件的加载性能。例如，设置为 metadata 可以在页面加载时快速获取视频的元数据，而不加载整个文件。

（五）poster（仅适用于 <video>）

• 作用：为视频指定一张封面图片。

• 取值：图片的 URL。

• 示例 ：

  <video src="movie.mp4" controls poster="poster.jpg">
    您的浏览器不支持 video 标签。
  </video>

• 解释 ：poster 属性用于在视频加载完成之前显示一张图片，通常用于吸引用户的注意力或提供视频的预览信息。

（六）controlsList

• 作用：自定义控制工具的显示内容。

• 取值 ：

  • nodownload：隐藏下载按钮。
  • nofullscreen：隐藏全屏按钮。
  • noremoteplayback：隐藏远程播放按钮（如投屏）。

• 示例 ：

  <video src="movie.mp4" controls controlsList="nodownload">
    您的浏览器不支持 video 标签。
  </video>

• 解释 ：controlsList 属性允许开发者自定义控制工具的显示内容，以满足特定的交互需求。

四、支持多种格式的多媒体文件

由于不同浏览器对多媒体文件格式的支持存在差异，建议为 <video> 和 <audio> 标签提供多种格式的文件，以确保兼容性。可以通过 <source> 标签实现：

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

• type 属性：指定文件的 MIME 类型。
• 解释 ：浏览器会按顺序尝试加载 <source> 标签中的文件，直到找到支持的格式为止。

五、使用 JavaScript 控制多媒体播放

除了 HTML 属性，还可以通过 JavaScript 动态控制 <video> 和 <audio> 的播放行为。以下是一些常见的操作：

（一）播放和暂停

const video = document.querySelector('video');

video.play();   // 播放
video.pause();  // 暂停

（二）设置音量

video.volume = 0.5; // 设置音量（0 到 1 之间）

（三）监听播放事件

video.addEventListener('ended', () => {
  console.log('播放结束');
});

（四）动态切换播放源

video.src = 'another-movie.mp4';

六、实际应用场景

（一）在线教育平台

在线教育平台通常需要嵌入大量的视频内容。通过使用 <video> 标签的 controls、autoplay 和 preload 属性，可以为用户提供流畅的视频播放体验。同时，结合 JavaScript 动态控制视频播放，可以实现更复杂的交互功能，如视频进度条、字幕切换等。

（二）音乐播放器

音乐播放器可以通过 <audio> 标签实现。通过设置 controls、autoplay 和 loop 属性，可以为用户提供基本的播放控制功能。结合 JavaScript，可以实现播放列表、随机播放等高级功能。

（三）视频广告

在网页中嵌入视频广告时，可以使用 <video> 标签的 muted 和 autoplay 属性实现静音自动播放。同时，通过设置 poster 属性，可以在视频加载完成之前显示一张吸引人的封面图片。

七、总结

<video> 和 <audio> 标签是 HTML5 提供的强大工具，用于嵌入多媒体内容。通过合理使用这些标签的常用属性（如 autoplay、controls、loop、muted、preload 和 poster），开发者可以实现丰富的多媒体播放功能，并优化用户体验。同时，结合 JavaScript 动态控制多媒体播放，可以实现更复杂的交互功能。在实际开发中，建议为多媒体文件提供多种格式，以确保兼容性，并通过监听事件和动态操作提升用户体验。