【问题标题】:Is there an "onClose" event for the fullscreen video player on iPhone?iPhone 上的全屏视频播放器是否有“onClose”事件?
【发布时间】:2012-04-27 10:56:36
【问题描述】:

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

视频结束后,我捕捉到ended 事件并通过myvideo.webkitExitFullScreen(); 关闭视频播放器。

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

有没有办法做到这一点?

【问题讨论】:

  • 我正在尝试同样的事情从全屏退出,但在 iphone 上没有成功。我正在使用视频 js 播放器。请进一步指导我

标签: html events video


【解决方案1】:

更新答案

您可以使用webkitendfullscreenwebkitenterfullscreen 事件:

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? - 不确定如何关联这两个问题。

我只是假设您使用 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
       }
    }
});

希望这对您有所帮助或指出正确的方向

【讨论】:

  • 对于那些在 iOS 下工作的人来说,这是行不通的……全屏/退出全屏时不会触发 resize 事件。
【解决方案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);    
});

【讨论】:

  • 欢迎来到 Stack Overflow。请解释你的代码。
  • 此代码实际上非常有用,因为您只能检测 fullscreenchange 事件,因为 fullscreenchange 事件在打开时触发,您需要检测当前状态。卢卡斯正在使用全屏返回是否全屏。这个小小的 sn-p 非常有帮助。但是“注意”在 ios 中这些事件不存在。
猜你喜欢
  • 2013-07-28
  • 2013-03-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-14
  • 1970-01-01
  • 1970-01-01
  • 2011-10-01
相关资源
最近更新 更多