jQuery实现<video>播放时解除静音并设置音量的解决方案

问题原因 #

你现有代码存在两个核心错误导致功能不生效：

• 监听事件选错：played是视频已经进入播放状态后才触发的事件，响应时机太晚，且控制静音的DOM属性名写错，正确属性是muted不是mute
• 缺少音量设置逻辑，需要单独给volume属性赋值来调整音量大小

修正方案 #

原有HTML代码不需要改动，jQuery代码按你的需求选对应版本即可：

版本1：兼容浏览器自动播放政策（推荐，无拦截风险）

主流浏览器都禁止非用户交互的有声视频自动播放，建议绑定用户点击页面的操作来触发解除静音，代码如下：

// 监听页面任意点击事件后解除静音并设置音量
$(document).on('click', function() {
  const $video = $('.recommendationVideo');
  $video.prop('muted', false);
  $video.prop('volume', 0.5); // 数值范围0-1，0.5对应50%音量，可按需调整
});

版本2：视频播放时自动尝试解除静音

如果确实需要视频启动播放就自动解静音，可以用如下代码，不过部分浏览器会拦截这个操作导致视频仍然无声：

// 将监听事件改为play，修正属性名，新增音量设置
$('.recommendationVideo').on('play', function() {
  $(this).prop('muted', false);
  $(this).prop('volume', 0.5);
});

注意：如果是页面加载后自动播放的视频，没有用户交互的前提下自动解除静音会被Chrome、Edge、Safari等主流浏览器直接拦截，建议优先选择版本1的实现逻辑。

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