vue video标签退出全屏隐藏video标签怎么设置

可以通过监听 `fullscreenchange` 事件来实现退出全屏时隐藏 video 标签。具体实现代码如下：

<template>
  <video ref="video" @fullscreenchange="handleFullscreenChange"></video>
</template>

<script>
export default {
  methods: {
    handleFullscreenChange() {
      const video = this.$refs.video;
      if (!document.fullscreenElement && !document.webkitFullscreenElement) {
        video.style.display = 'none';
      } else {
        video.style.display = 'block';
      }
    }
  }
}
</script>

相关问题

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>

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

vue监听video标签退出全屏了

你可以使用`fullscreenchange`事件来监听video标签是否退出全屏，示例代码如下：

const videoElement = document.querySelector('video'); // 获取video元素

videoElement.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement === null) {
    // 这里是退出全屏后的处理逻辑
    console.log('Video exited fullscreen mode.');
  }
});

当`fullscreenchange`事件触发时，我们可以通过`document.fullscreenElement`变量来判断当前是否处于全屏模式。如果`document.fullscreenElement`为`null`，则表示已经退出全屏模式，我们可以在这里添加退出全屏后的处理逻辑。