记录一下HTML5 中Video 全屏监听,退出全屏事件方法
时间: 2023-11-22 19:56:47 浏览: 179
HTML5 video进入全屏和退出全屏的实现方法
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 全屏监听和退出全屏事件方法的介绍。
阅读全文