取消静音背景视频的按钮

Question

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

我想知道是否可以有一个按钮/图标来取消静音，同时重新启动视频，以便 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>