Javascript 当我按下HTML5视频元素的默认全屏按钮时，如何捕获全屏事件？

我在使用HTML5

视频

标签和

图标

时遇到问题

以下是我的模板的一部分：

<ion-view>
   <ion-content overflow-scroll="true" data-tap-disable="true">
      <div class="list card">
        <div class="item item-body" style="padding: 5% 5% 5% 5%">
            <div class="player">
            <video controls="controls" autoplay id="sr"></video>
          </div>
        </div>
      </div>
   </ion-content>
</ion-view>

如您所见，没有自定义控制按钮的

video

标记，并使用chromium本身创建的默认控制栏

---

现在我想在按下

全屏

按钮时做一些事情。我找到了一个解决方案，在视频对象中添加了两个侦听器：

webkitebeginfullscreen

和

webkitendfullscreen

，但它没有启动

我真的不确定Android或iOS，但

元素可以使用以下三个事件之一：

• webkitfullscreenchange

• mozfullscreenchange

• fullscreenschange

就你所拥有的一切而言

请参阅或输入以下代码：

function onFullScreen(e) {
  var isFullscreenNow = document.webkitFullscreenElement !== null
  alert('Fullscreen ' + isFullscreenNow)
}

document.getElementById("video").addEventListener('webkitfullscreenchange', onFullScreen)

---

你好@geekonaut，快速提问。如何将事件侦听器添加到动态创建的视频列表中？谢谢，答案是活动代表团。事件在DOM树上下冒泡，因此您可以使用包含所有动态添加的视频的容器元素，并在容器事件上使用单个事件处理程序来捕获这些事件。下面是一个示例：（仅适用于Chrome，但它在浏览器中使用正确的事件）请注意，默认UI的全屏模式不一定与WebFullScreen API相同。例如，Chrome现在支持不固定的全屏API，但从视频元素发送的事件是一个专有事件，需要使用

webkit

前缀捕获（与fullscreenElement等相同）。=>这不是2019年的规范，仍然必须使用

webkitfullseenchange

而不是

fullscreenchange

。

function onFullScreen(e) {
  var isFullscreenNow = document.webkitFullscreenElement !== null
  alert('Fullscreen ' + isFullscreenNow)
}

document.getElementById("video").addEventListener('webkitfullscreenchange', onFullScreen)