在音频静音的情况下使用 play() 视频方法答案

【问题标题】：Use play() video method with audio muted在音频静音的情况下使用 play() 视频方法
【发布时间】：2022-01-01 07:01:45
【问题描述】：

我在我的网站上的 HTML 背景视频中添加了一个播放按钮，以便用户可以选择是否播放视频。视频添加了以下代码：

<video id="mobilevideo" class="video-full" loop muted playsinline>
  <source src="<?php echo esc_url( $videofile ); ?>" type="video/mp4">Your browser does not support the video tag.
</video>

我添加了控制按钮并设置了样式，因此当用户切换按钮时，图标可以从播放变为暂停。我对静音和取消静音做了同样的操作。

<a class="playcontrol" href="#">
    <img src="<?php echo $pause; ?>" width="18" height="" alt="overlay" class="play">
    <img src="<?php echo $play; ?>" width="18" height="" alt="overlay" class="pause">
</a>
<a class="soundcontrol" href="#">
    <img src="<?php echo $pause; ?>" width="18" height="" alt="overlay" class="unmute">
    <img src="<?php echo $play; ?>" width="18" height="" alt="overlay" class="mute">
</a>

但是，我不希望音频自行播放。我希望用户能够单击另一个按钮来启用或不启用音频。

var mobileVideo = document.getElementById("mobilevideo"); 
$(".video-mobile video").prop('muted', true);

$(".video-mobile .playcontrol").click(function () { 
    if (mobileVideo.paused) {
        mobileVideo.muted = true;
        mobileVideo.play(); 
        $(this).addClass('playsound'); // changing icon for button
    } else {
        mobileVideo.pause(); 
        $(this).removeClass('playsound'); // changing icon for button
    }
});

$(".video-mobile .sound-control").click(function () {
    if ($(".video-mobile video").prop('muted')) {
        $(".video-mobile video").prop('muted', false);
        $(this).addClass('playsound'); // changing icon for button
    } else {
        $(".video-mobile video").prop('muted', true);
        $(this).removeClass('playsound'); // changing icon for button
    }
});

我遇到的问题是，虽然两个按钮都很好用。播放按钮会导致视频在单击时取消静音。我不希望这样，但我不知道如何使播放按钮仅控制播放和暂停而没有音频，而另一个按钮将控制音频。

欢迎提出任何建议。

【问题讨论】：

这能回答你的问题吗？ HTML5 Video muted but still playing
并非如此。我认为关键区别在于我的代码不会自动播放视频。将自动播放的视频静音没有问题。问题在于手动播放和暂停视频。这样做似乎也会自动取消视频静音。

标签： javascript html jquery html5-video

【解决方案1】：

最终使用视频事件解决了这个问题。删除了这一行 - mobileVideo.muted = true; 并添加到脚本的下方，以便在视频开始播放后将其静音：

mobileVideo.addEventListener('play', (event) => {
    mobileVideo.muted = true;
});

在函数启动前仍然会播放几毫秒，但它总体上可以正常工作。它几乎不引人注意。不过，欢迎提出对此进行微调的建议。

【讨论】：

【解决方案2】：

您可以尝试使用volume 属性并将其设置为0。这是0-1之间的区间。在这种情况下，它将是：mobileVideo.volume = 0;。

【讨论】：