H5 移动端怎么监听video退出了全屏？

Question

要在手机页面上放个视屏，设计的框框是16:9的，但是视频差不多反了一下是9:16的，所以我就想在播放前隐藏，点击播放后全屏显示播放，退出全屏就直接关闭隐藏视频。 我在这里监听webkitfullscreenchange事件，但是手机上好像不支持？下面是我的代码：

vdo.addEventListener("webkitfullscreenchange", function(e) {
    if (!document.webkitIsFullScreen) {
       //退出全屏关闭视频
       alert(1);
    };
})

请问我改怎么样才能知道退出了全屏？

Answer 1

我不知道能否监听视频全屏，不过可以通过设置视频全屏播放，监听视频onplaying事件来达到目的

设置视频全屏播放：webkit-playsinline="false"

---

至于视频翻转了90度，把元素翻回来不就好了

transform: rotate(90deg)

不过问题仍然出在视频尺寸比例上，最好让视觉稿和接口数据匹配上。

Answer 2

上面的方法是监听视频全屏/退出全屏的，不过我想要的效果是：

全屏播放完成后—》触发退出全屏的事件（因为安卓微信上video全屏播放完成后，没退出全屏会出现腾讯的广告，所以要需要退出全屏事件）

网上找了很久，后面找到了解决方法，可以看一下这个文章《ios、安卓在微信video监听播放结束后，怎么退出全屏播放？》