使用javaScript进行音量静音和取消静音

我想使用javaScript禁用和取消禁用卷

AFRAME.registerComponent('volume', {
 init: function () {
   var buttonVolume = document.querySelector('#control-volume');
   var buttonMute = document.querySelector('#control-mute');
   var vid = document.querySelector('#video-src');
   //vid.setAttribute('volume', this.value);
   this.el.addEventListener('click', function (evt) {
   //alert(this.vid.muted);
   if(this.vid.muted === true){
    this.vid.muted = false;
    buttonVolume.setAttribute('visible', 'true');
    buttonMute.setAttribute('visible', 'false');
  }
  else{
    this.vid.muted = true;
    buttonVolume.setAttribute('visible', 'false');
    buttonMute.setAttribute('visible', 'true');
  }
}, false);
 }
 }); 

这是我的密码。但始终

未捕获类型错误：无法读取显示的未定义的属性“mute”。如何解决这个错误

<video id="video-src" style="display:none"  
           autoplay="true" loop="false" crossorigin="anonymous" playsinline webkit-playsinline>
      <!-- MP4 video source. -->
      <source id="load" type="video/mp4"/>
    </video>
  <a-image volume id="control-volume" class="clickable" width="0.4" 
 height="0.4" src="#volume-normal" position="3 -4.440 -3.542" scale="1.3 1.3 
  1.3"></a-image>
  <a-image volume id="control-mute" class="clickable" width="0.4" height="0.4" src="#volume-mute" position="3 -4.440 -3.542" scale="1.3 1.3 1.3" visible="false">
  </a-image>



这是我的html代码。如何解决这个错误。原因是什么？为什么会显示此错误？
作为答案发布。代码有误

var-vid
被引用为
this.vid
。删除了
this
为什么
var vid=document.querySelector（'video src'）在事件处理程序中显示为
this.vid
试试
if（vid.mute）
-你的HTML中的视频src在哪里？我得到的视频源是这样的。我应该去掉这个吗？只要去掉“这个”就行了。没关系。请随意删除这个问题