video退出全屏事件

当视频退出全屏时，浏览器会触发 `fullscreenchange` 事件。你可以使用 `document` 对象的 `addEventListener` 方法来监听该事件。以下是一个示例代码：

document.addEventListener('fullscreenchange', (event) => {
  const videoElement = document.querySelector('video');
  if (!document.fullscreenElement && videoElement) {
    // 进行退出全屏后的操作
  }
});

在上述代码中，我们通过 `querySelector` 方法获取了页面上的视频元素，并在事件处理程序中检查 `fullscreenElement` 属性是否为 `null`，如果是，则说明视频已经退出全屏模式。你可以在条件语句中添加需要执行的代码。

相关问题

记录一下HTML5 中Video 全屏监听，退出全屏事件方法

HTML5 中的 Video 标签提供了全屏播放功能，并且也提供了全屏监听和退出全屏事件方法。

1. 全屏监听事件

在 HTML5 中，可以使用 `fullscreenchange` 事件来监听全屏状态的变化。当进入全屏或退出全屏时，该事件都会被触发。

var video = document.getElementById("myVideo");
video.addEventListener("fullscreenchange", function () {
  if (document.fullscreenElement) {
    console.log("进入全屏");
  } else {
    console.log("退出全屏");
  }
});

2. 退出全屏事件

如果要在程序中主动退出全屏，可以使用 `exitFullscreen()` 方法。

var video = document.getElementById("myVideo");
video.exitFullscreen();

注意：该方法只能在全屏状态下调用，否则会抛出错误。同时，不同浏览器下的方法名可能有所不同，需要做兼容处理。

以上就是 HTML5 中 Video 全屏监听和退出全屏事件方法的介绍。

vue设置video标签全屏并退出全屏

要在Vue中设置视频标签全屏并退出全屏，可以使用全屏API。

在Vue组件中，可以这样调用全屏API：

// 进入全屏
element.requestFullscreen();

// 退出全屏
document.exitFullscreen();

其中，`element`是视频标签的DOM元素，可以通过`ref`属性来获取。

例如，假设视频标签的`ref`属性为`videoElement`，则可以这样调用全屏API：

<template>
  <div>
    <video ref="videoElement" src="video.mp4"></video>
    <button @click="enterFullScreen">进入全屏</button>
    <button @click="exitFullScreen">退出全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    enterFullScreen() {
      this.$refs.videoElement.requestFullscreen();
    },
    exitFullScreen() {
      document.exitFullscreen();
    }
  }
};
</script>

这样，点击“进入全屏”按钮后，视频就会全屏播放。点击“退出全屏”按钮后，视频就会退出全屏。