在 web 前端开发中，我们经常会遇到需要在网页中嵌入音频或视频的情况。HTML 提供了 <audio> 和 <video> 标签来实现这个功能，而其中的 controller 属性则可以让我们自定义控制器，方便用户操作音频或视频。
什么是 controller 属性？
controller 属性是 <audio> 和 <video> 标签的一个布尔属性，用于指定是否显示默认的媒体控制器。当 controller 属性被设置为 true 时，浏览器会自动显示一个默认的播放控制器，包括播放/暂停按钮、音量控制、进度条等，让用户可以方便地操作音频或视频。
如何使用 controller 属性？
要使用 controller 属性，只需要在 <audio> 或 <video> 标签中添加 controller 属性即可，如下所示：
<video src="video.mp4" controls></video>
在上面的示例中，我们在 <video> 标签中添加了 controls 属性，这样就会显示默认的播放控制器。如果想要自定义控制器，可以通过 JavaScript 来实现。
自定义控制器示例
下面是一个简单的示例，演示如何使用 JavaScript 来自定义一个简单的音频控制器：
-- -------------------- ---- -------
------ ------------ ------------------------
------- -----------------------------------
------- -------------------------------------
--------
----- ----- - -----------------------------------
-------- ----------- -
-------------
-
-------- ------------ -
--------------
-
---------在上面的示例中，我们首先创建了一个 <audio> 标签，并为其设置了一个 id，然后通过 JavaScript 来控制音频的播放和暂停操作。
总结
通过 controller 属性，我们可以方便地在网页中嵌入音频或视频，并提供一个友好的控制器让用户操作。同时，通过 JavaScript，我们还可以自定义控制器，实现更加个性化的功能。希望本文对你有所帮助，谢谢阅读！