Question

我在网站上使用html5视频播放器。当用户开始播放时，播放器进入全屏模式并播放视频。

视频结束后，我会抓住ended事件并通过myvideo.webkitExitFullScreen();关闭视频播放器。

现在，如果用户点击顶部栏中的“完成”按钮或者玩家通过video.webkitExitFullScreen();关闭，则当玩家实际获得关闭时，我需要另一个事件。

有办法做到这一点吗？

Answer 1

更新答案

您可以使用webkitendfullscreen和webkitenterfullscreen事件：

var vid = document.getElementById("some-vid");

vid.addEventListener('webkitendfullscreen', function (e) { 
  // handle end full screen 
});

vid.addEventListener('webkitenterfullscreen', function (e) { 
  // handle enter full screen 
});

上一个答案

此处也提出了类似的问题：How do I capture keyboard events while watching an HTML5 video in fullscreen mode? - 不确定如何将这2个问题联系起来。

我只是假设你使用jQuery来编写这段代码。您只需要知道视频何时从全屏模式更改为非全屏模式...所以在调整大小时，您可以检查video.webkitDisplayingFullscreen;属性。

var isVideoFullscreen = video.webkitDisplayingFullscreen;

$(window).bind("resize", function (e) {
    // check to see if your browser has exited fullscreen
    if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
       isVideoFullscreen =  video.webkitDisplayingFullscreen;

       if (isVideoFullscreen) {
            // you have just ENTERED full screen video
       } else {
            // you have just EXITED full screen video
       }
    }
});

希望这有助于或指出正确的方向

Answer 2

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

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

iPhone上的全屏视频播放器是否有“onClose”事件？

2 个答案:

更新答案

上一个答案