如何使用 JS/JQuery 检测视频是否全屏？

Question

我到处找了，还没找到足够清楚的东西。

（请注意大多数答案已经过时，我相信一定有更好的方法。）

我正在尝试执行以下操作：

进入全屏后，<video> 个标签取消静音。
退出全屏后，<video> 个标签被静音。

请理解我在一个页面中有多个 <video> 标签，它们是动态生成的。

理想的情况是 JS/JQuery 事件 监听所有 <video> 标签的事件，如果屏幕模式改变，它切换静音模式。

假设我的视频标签是：

<video class="img-fluid mx-auto d-block rounded " src="something.mp4" controls muted loop alt="Article Video">
<video class="img-fluid mx-auto d-block rounded " src="something-else.mp4" controls muted loop alt="Article Video">

我认为用于切换的 JQuery 是这样的：

var video = $('.some-video-class');
video.muted = !video.muted;

但是我在任何地方都找不到如何监听全屏事件，我想应该是这样的：

video.addEventListener('webkitfullscreenchange', function(video){
    var video = $('.some-video-class');
    video.muted = !video.muted;
});

如果有人能帮助我找出我做错了什么，将不胜感激。

请注意我使用的是 Bootstrap 4.3.1 和 JQuery 3.4.1

Answer 1

为此，您需要监听 fullscreenchange 事件（包括特定于供应商的版本）。然后你可以使用 document.fullscreenElement 属性来确定哪个视频当前是全屏并相应地修改 muted 属性。试试这个：

$('video').on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function() {
  this.muted = document.fullscreenElement !== this;
});

这适用于您页面上的任何 video 元素。

这是 jsFiddle 中的一个工作示例，这是必需的，因为 SO 片段不允许全屏视频。

如何使用 JS/JQuery 检测视频是否全屏？

How can I detect if a video is full screen using JS/JQuery?

javascript

video

jquery

events

html5-video