我们来通过具体的例子来讲解 HTML 中 <video> 和 <audio> 元素的 controls 属性。
1. controls 属性的作用
controls 属性是 HTML5 中 <audio> 和 <video> 元素的一个布尔属性。
功能：当在
<audio>或<video>标签中添加controls属性时，浏览器会自动显示一组默认的用户界面控件（控件条）。这些控件允许用户与媒体文件进行交互。默认行为：如果未设置
controls属性，浏览器通常不会显示任何控件，用户将无法通过界面直接控制播放、暂停、调整音量或查看进度。控件内容：浏览器显示的控件通常包括：
播放/暂停按钮：用于开始或停止播放。
进度条：显示当前播放位置和视频/音频的总时长，用户可以点击或拖拽来跳转到指定位置。
音量控制：调节音量大小，有时会有一个静音按钮。
全屏按钮（仅限视频）：允许用户将视频全屏显示。
字幕/轨道选择（如果可用）：允许用户选择不同的字幕或音轨。
语法：
controls属性无需赋值。例如：<video controls>或<audio controls>。
2. <video> 元素的 controls 属性示例
<!DOCTYPE html> <html> <head> <title>Video with Controls Example</title> </head> <body> <h2>HTML5 Video with Controls</h2> <!-- 使用 controls 属性显示默认播放控件 --> <video width="400" height="300" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <!-- 如果浏览器不支持 video 标签，显示以下文本 --> Your browser does not support the video tag. </video> <p>这个视频播放器包含默认的播放控件：播放/暂停、进度条、音量滑块和全屏按钮。</p> </body> </html>
解释：
<video width="400" height="300" controls>：定义了一个宽度为 400 像素、高度为 300 像素的视频播放器，并添加了controls属性。<source>：提供了视频的多个格式源，以确保在不同浏览器中都能播放。Your browser does not support the video tag.：如果浏览器不支持<video>标签，会显示这段文本。
3. <audio> 元素的 controls 属性示例
<!DOCTYPE html> <html> <head> <title>Audio with Controls Example</title> </head> <body> <h2>HTML5 Audio with Controls</h2> <!-- 使用 controls 属性显示默认播放控件 --> <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> <!-- 如果浏览器不支持 audio 标签，显示以下文本 --> Your browser does not support the audio element. </audio> <p>这个音频播放器包含默认的播放控件：播放/暂停、进度条和音量滑块。</p> </body> </html>
解释：
<audio controls>：定义了一个音频播放器，并添加了controls属性。<source>：提供了音频的多个格式源，以确保在不同浏览器中都能播放。Your browser does not support the audio element.：如果浏览器不支持<audio>标签，会显示这段文本。
4. 不使用 controls 属性的情况
如果省略 controls 属性，浏览器将不会显示任何播放控件。
<video width="400" height="300" src="movie.mp4"> <!-- 没有 controls 属性 --> </video>
在这种情况下，用户无法通过界面操作来播放或暂停视频，除非通过 JavaScript 编程方式来控制。
5. 通过 JavaScript 控制 controls 属性
你也可以通过 JavaScript 动态地设置或移除 controls 属性。
// 获取 video 元素
var videoElement = document.getElementById("myVideo");
// 添加 controls 属性
videoElement.controls = true; // 或者 videoElement.setAttribute("controls", "");
// 移除 controls 属性
videoElement.controls = false; // 或者 videoElement.removeAttribute("controls");通过这种方式，你可以根据需要动态地控制是否显示控件。
总结来说，controls 属性是让 <video> 和 <audio> 元素具备用户交互能力的关键。它使得用户能够方便地控制媒体播放，而无需编写额外的 JavaScript 代码来创建控件。