VideoJS 播放器自定义静音/取消静音切换

Posted 2023-05-08

【中文标题】VideoJS 播放器自定义静音/取消静音切换

【英文标题】：VideoJS player custom mute/unmute toggle

【发布时间】：2021-02-05 12:46:06

【问题描述】：

我需要为VideoJs 播放器添加一个自定义静音/取消静音按钮（当我点击该按钮时，如果它已静音，它应该取消静音，如果它未静音则它应该静音）。

我尝试使用 javascript 按以下方式执行此操作，但它不起作用。你能帮我解决这个问题吗？

const muteButton = document.querySelector(".mute-btn11");

muteButton.addEventListener("click", function() 
  var video = videojs("myVideo");
  const booleanValue = video.muted.valueOf();
  console.log(booleanValue);

  if (booleanValue == true) 
    video.muted(false);
   else 
    video.muted(true);
  
);

<video controls autoplay playsinline id="myVideo" class="video-js vjs-16-9 vjs-big-play-centered"></video>
<button class="mute-btn11"> Mute </button>

【问题讨论】：

用大写的“I”拼写“playsinline”能解决这个问题吗？如此处所述：github.com/videojs/video.js/issues/4222

【参考方案1】：

静音是 VideJS Player 对象的一个​​函数。

您可以使用此方法获取视频的 Player 对象。

var vp = videojs('myVideo').player();

然后，您可以调用 muted() 函数来获取布尔值。

var muted = vp.muted(); 

设置使用带真或假参数的静音方法

var muted = vp.muted( true ); 

var muted = vp.muted( false );