Swift中为AVPlayer添加静音/取消静音及播放控制选项的方法

一、添加原生播放控制组件 #

直接在<video>标签中添加controls属性，浏览器会自动生成一套默认播放控制栏，包含播放/暂停、音量调节、进度拖拽等功能，用户能通过控制栏里的音量按钮直接完成静音/取消静音操作：

<video autoplay muted loop controls>
  <source src="your-video.mp4" type="video/mp4">
</video>

说明：controls是HTML5 video的原生属性，无需额外编写JS代码就能生效，默认控制栏已自带音量调节功能。

二、自定义静音/取消静音按钮 #

如果需要个性化样式的静音按钮，可通过HTML配合JS实现：

1. 编写基础HTML结构：

<video id="targetVideo" autoplay muted loop>
  <source src="your-video.mp4" type="video/mp4">
</video>
<button id="muteToggleBtn">取消静音</button>

2. 添加交互逻辑代码：

const video = document.getElementById('targetVideo');
const muteBtn = document.getElementById('muteToggleBtn');

muteBtn.addEventListener('click', () => {
  // 切换视频静音状态
  video.muted = !video.muted;
  // 更新按钮文本，提示当前状态
  muteBtn.textContent = video.muted ? '取消静音' : '静音';
});

注意：多数浏览器要求自动播放的视频必须默认静音（即带有muted属性），所以初始的muted属性建议保留，用户可通过按钮或原生控制手动取消静音。

内容的提问来源于stack exchange，提问作者Dibz