取消静音背景视频的按钮

Question

尝试使用自托管视频背景英雄（在带有 elemnetor 的 wordpress 中），它在加载时自动播放但没有声音，因为它应该被静音以符合 ADA 标准并被某些网络浏览器支持。

我想知道是否可以 button/icon 取消静音但同时重新启动视频，以便 30 秒的消息和声音从头开始？

问题：
我已将其设置为无声自动播放，并使用此技术和此代码添加了一个图标 (https://elementorcodes.com/elementor-video-background-sound-button/)，但我如何才能同时触发重启？

代码：

document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>

Answer 1

heroBackgroundVideo.currentTime = 0;
heroBackgroundVideo.play();

取消静音背景视频的按钮

Button to unmute background video

html

javascript

video