微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

取消静音背景视频的按钮

如何解决取消静音背景视频的按钮

尝试使用自带的视频背景英雄(在带elemnetor的wordpress中为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>

解决方法

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。