代码之家 › 专栏 › 技术社区 › Mohamed Said

将视频点击功能从播放/暂停更改为静音/取消静音

mute controller video audio

1

Mohamed Said · 技术社区 · 6 月前

我有一个标题视频,默认情况下需要将其静音,以便在所有浏览器上自动播放,我想同时隐藏所有视频控件,为用户提供静音和取消静音的选项,我想将视频的点击功能从播放/暂停更改为静音/取消静音,我该怎么做?

我试图在推特上发布Stack的一些解决方案,但我不知道该怎么做。

1 回复 | 直到 6 月前

1

badAtCoding 6 月前

您可以使用 muted attribute 只要您的视频默认为静音,就可以切换视频的音频。

const video = document.getElementById('myVideo');

video.addEventListener('click', () => {
    video.muted = !video.muted;
});

也可以直接使用 the html onclick event attribute 不使用单独的脚本:

<video id="myVideo" width="320" height="240" autoplay muted onclick="event.target.muted = !event.target.muted">
        <source src="sample.mp4" type="video/mp4">
</video>