vue监听video标签退出全屏了
时间: 2023-06-30 08:24:48 浏览: 61
你可以使用`fullscreenchange`事件来监听video标签是否退出全屏,示例代码如下:
```javascript
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`,则表示已经退出全屏模式,我们可以在这里添加退出全屏后的处理逻辑。
相关问题
vue 监听video标签全屏
回答: 在Vue中监听video标签的全屏事件可以通过使用第三方插件vue-video-player来实现。首先,你需要在Vue组件中引入vue-video-player插件,并对其进行样式改造以满足你的需求。然后,在methods中监听video的loadeddata事件,在事件处理函数中使用player.on('fullscreenchange', () => {})来监听全屏状态的变化。在这个回调函数中,你可以根据player.isFullscreen_的值来判断视频是否处于全屏状态。\[2\]\[3\]
#### 引用[.reference_title]
- *1* [video标签使用(全屏的进入和监听)](https://blog.csdn.net/ys_dd/article/details/122347988)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件](https://blog.csdn.net/DarlingYL/article/details/130441908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
vue video标签退出全屏隐藏video标签怎么设置
可以通过监听 `fullscreenchange` 事件来实现退出全屏时隐藏 video 标签。具体实现代码如下:
```javascript
<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>
```