Question

我想知道视频何时进入全屏模式，退出时我已添加以下内容：

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

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

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

但是当我切换到全屏时，我的听众没有抓住任何事件。我也尝试过没有运气的代码（总是错误的）：

 videoElement.webkitDisplayingFullscreen

我在ubuntu上使用谷歌浏览器版本45.0.2454.85（64位），而html5视频标签上方的播放器是流动播放器。

任何帮助将不胜感激

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

但是如果你使用流程播放器，你应该使用他们的API。

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

2 个答案: