嵌入Youtube视频 静音开/关按钮

11 浏览
0 Comments

嵌入Youtube视频 静音开/关按钮

我想为我的网站添加一个静音按钮，这样当按下按钮时，背景视频中的音频将会被取消静音/静音。\n我现在有以下的JavaScript代码。是否有办法在这段代码中实现一个按钮？\n

var videos = [
'D1sZ_vwqwcE',
'BC_Ya4cY8RQ',
'HPc8QMycGno',
'JDglMK9sgIQ',
'hgKDu5pp_fU',
'oKMNj8v2gKE',
'TfnRTifSWh0',
'xO3aB5C3dpQ',
'v5hepekcHkk',
'4kjpZ_sPxzc',
];
var index = Math.floor(Math.random() * videos.length);
var html = '';
document.write(html);

\n参考网站：https://enph.la

0

1 答案

0 Comments

问题的出现原因是需要在嵌入的YouTube视频中添加一个静音开/关按钮。解决方法是使用YouTube API来实现此功能，并提供了一个可以在工作示例中查看的解决方案。

解决方案中的代码如下：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();
}
function onPlayerStateChange() {
  console.log("my state changed");
}
document.getElementById("mute").addEventListener('click', function(event) {
  console.log(player);
  if (player.isMuted()) {
    player.unMute();
  } else {
    player.mute();
  }
});

CSS代码如下：

#mute {
  width: 50px;
  height: 50px;
  background-color: red;
}

HTML代码如下：






Press red square to mute/unmute

这个解决方案使用了YouTube API来创建一个新的YouTube播放器，并添加了一个事件监听器来处理播放器的准备和状态变化事件。在点击红色方块时，通过判断播放器是否已静音来切换静音状态。

0