记录一下HTML5 中Video 全屏监听,退出全屏事件方法
时间: 2023-11-22 22:56:47 浏览: 50
HTML5 中的 Video 标签提供了全屏播放功能,并且也提供了全屏监听和退出全屏事件方法。
1. 全屏监听事件
在 HTML5 中,可以使用 `fullscreenchange` 事件来监听全屏状态的变化。当进入全屏或退出全屏时,该事件都会被触发。
```javascript
var video = document.getElementById("myVideo");
video.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
console.log("进入全屏");
} else {
console.log("退出全屏");
}
});
```
2. 退出全屏事件
如果要在程序中主动退出全屏,可以使用 `exitFullscreen()` 方法。
```javascript
var video = document.getElementById("myVideo");
video.exitFullscreen();
```
注意:该方法只能在全屏状态下调用,否则会抛出错误。同时,不同浏览器下的方法名可能有所不同,需要做兼容处理。
以上就是 HTML5 中 Video 全屏监听和退出全屏事件方法的介绍。
相关问题
vue中源生video标签怎么监听esc退出全屏
在Vue中使用原生video标签,可以通过在Vue组件中使用`ref`属性来获取video元素的DOM对象,然后可以调用原生的addEventListener方法来监听`fullscreenchange`事件,从而在退出全屏时执行相应的逻辑,如下所示:
```html
<template>
<div>
<video ref="videoPlayer" src="your-video-src"></video>
</div>
</template>
<script>
export default {
mounted() {
const videoPlayer = this.$refs.videoPlayer
videoPlayer.addEventListener('fullscreenchange', this.handleExitFullScreen)
},
methods: {
handleExitFullScreen() {
const isFullScreen = document.fullscreenElement !== null
if (!isFullScreen) {
// 执行退出全屏后的逻辑
}
}
}
}
</script>
```
在`handleExitFullScreen`方法中,判断`document.fullscreenElement`是否为null来判断当前是否全屏,如果不是全屏则执行相应的逻辑。
video退出全屏事件
当视频退出全屏时,浏览器会触发 `fullscreenchange` 事件。你可以使用 `document` 对象的 `addEventListener` 方法来监听该事件。以下是一个示例代码:
```javascript
document.addEventListener('fullscreenchange', (event) => {
const videoElement = document.querySelector('video');
if (!document.fullscreenElement && videoElement) {
// 进行退出全屏后的操作
}
});
```
在上述代码中,我们通过 `querySelector` 方法获取了页面上的视频元素,并在事件处理程序中检查 `fullscreenElement` 属性是否为 `null`,如果是,则说明视频已经退出全屏模式。你可以在条件语句中添加需要执行的代码。