如何在 chrome 中查看视频是否以全屏模式播放

Question

我试图找出视频何时进入全屏模式以及何时退出，我添加了以下监听器：

@element.addEventListener("webkitbeginfullscreen", (e) ->
  @fullscreen = true
)

@element.addEventListener("webkitendfullscreen", (e) ->
  @fullscreen = true
)

@element.addEventListener("webkitfullscreenchange", (e) ->
  @fullscreen = ....
)

但是当我切换到全屏时，我的听众都没有捕捉到任何事件。我也试过以下代码但没有运气（它总是错误的）：

 videoElement.webkitDisplayingFullscreen

我在 ubuntu 上使用 google chrome 版本 45.0.2454.85（64 位）并且 html5 视频标签上方的播放器是 flowplayer。

任何帮助将不胜感激

Answer 1

您可以使用以下...

jQuery(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', '#videoElementId', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});

Answer 2

建议直接在文档中添加事件处理器

像这样添加处理程序（纯 js）适用于 chrome：

document.addEventListener("webkitfullscreenchange", function (event) {
   console.log("on webkitfullscreenchange");
   alert("on webkitfullscreenchange");
});

我创建了一个快速代码笔作为演示。

copepen example

但是如果你使用 flowplayer，你应该使用他们的 API。

如何在 chrome 中查看视频是否以全屏模式播放

How to find out if a video is being played in fullscreen mode in chrome

javascript

google-chrome

html5-video

flowplayer