时间戳

首页 > 解决方案 > 如何使用按钮在 iframe ( youtube ) 中切换视频静音？

javascript - 如何使用按钮在 iframe ( youtube ) 中切换视频静音？

问题描述

你好吗？

我正在尝试在 wordpress 标题中为 youtube iframe 的播放/静音过程制作一个按钮...

<iframe id="wp-custom-header-video" name="video-wp" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="2000" height="1200" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&amp;controls=0&amp;disablekb=1&amp;fs=0&amp;iv_load_policy=3&amp;loop=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fepistolariodelamemoria.cl&amp;widgetid=1" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>

<div id="mute">
</div>

JS

$("#mute").on("click", function () {
  var mute_toggle = $(this);

  if (player.isMuted()) {
    player.unMute();
    mute_toggle.text("volume_up");
  } else {
    player.mute();
    mute_toggle.text("volume_off");
  }
});

但它对我不起作用，你能帮我解决这个问题吗

标签： javascriptwordpressiframeyoutube

解决方案

也许这有帮助？： https ://stackoverflow.com/a/26478263/17135631

$("video").prop('muted', true);

$(".mute-video").click(function () {
    if ($("video").prop('muted')) {
        $("video").prop('muted', false);
        $(this).addClass('unmute-video');

    } else {
        $("video").prop('muted', true);
        $(this).removeClass('unmute-video');
    }
    console.log($("video").prop('muted'))
});

推荐阅读