Uncaught DOMException: Failed to set the ‘volume‘ property on ‘HTMLMediaElement‘_failed to set the 'volume' property on 'htmlmediae-优快云博客

本文链接：https://blog.youkuaiyun.com/ZHONG_____/article/details/125355215

博客内容讲述了在JavaScript中操作HTMLMediaElement的volume属性时，由于设置的音量值超过0到1的范围导致的DOMException错误。分析了错误原因并提供了解决方案，即确保音量值在0到1之间，以避免此类异常。通过修改音量滑动条的input事件处理函数，将音量值转换并限制在正确的范围内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误

未捕获的DOMException
未捕获的DOMException:未能在“HTMLMediaElement”上设置“volume”属性:提供的卷(66)超出了范围[0，1]。在HTMLInputElement。<匿名>

在这里插入图片描述

原因分析

HTMLMediaElement.volume 属性可设置媒体播放时的音量
取值为 0 到 1 的双精度值。0 为静音，1 为音量最大时的值。
当取值不在【0，1】范围内就会报DOMException的错误。

解决方案

检查视频的音量设置，控制volume在【0，1】之间。

举例证明

错误示例如下：

var doms = {
  // 视频元素
  video: document.querySelector("video"),
  //音量元素
  volume: {
    // 滑动块
    range: document.querySelector("#volume input"),
    // 文本
    text: document.querySelector("#volume span"),
  }
  }
  

//给音量滑动条添加input事件
doms.volume.range.addEventListener("input", function () {

  //改变视频的音量
  doms.video.volume =  100 +  (this.value / 100).toFixed(2);
  
  //剩余代码略
  ...
})

此处的该视频音量：范围设置为100+，直接超出规定的【0，1】范围，势必会报错

报错如下：
在这里插入图片描述

解决方案如下：

设置在【0，1】之间的正确音量

//给音量滑动条添加input事件
doms.volume.range.addEventListener("input", function () {

  //改变视频的音量
  doms.video.volume = (this.value / 100).toFixed(2);
  
  //剩余代码
  ...
})