如何确定视频是否在 chrome 中以全屏模式播放答案

【问题标题】：How to find out if a video is being played in fullscreen mode in chrome如何确定视频是否在 chrome 中以全屏模式播放
【发布时间】：2016-04-04 20:48:46
【问题描述】：

我正在尝试找出视频何时进入全屏模式以及何时退出，我添加了以下听众：

@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。

任何帮助将不胜感激

【问题讨论】：

标签： javascript google-chrome html5-video flowplayer

【解决方案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);    
});

【讨论】：

【解决方案2】：

建议直接将事件处理程序添加到文档中

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

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

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

copepen example

但如果您使用 flowplayer，您可能应该使用他们的API。

【讨论】：