关于HTML5中Video全屏监听,退出全屏事件方法(亲测有效)

男娘i 2022-09-12 01:44 1192阅读 0赞

最近做视频播放,要求点击图片全屏播放视频,视频退出全屏显示图片,所以需要对video退出全屏事件进行处理,以下js方法亲测有效,测试浏览器(fireFox,GoogleChrome,MS.Edge,搜狗等)

  1. <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  2. <script>
  3. //jQuery监听事件(窗口状态改变)
  4. $(window).resize(function () {
  5. if (checkIsFullScreen()) {
  6. console.log("进入全屏");
  7. } else {
  8. console.log("退出全屏");
  9. }
  10. });
  11. //js监听事件(全屏状态改变)
  12. /*document.addEventListener('fullscreenchange', () => {
  13. if (checkIsFullScreen()) {
  14. console.log("进入全屏");
  15. } else {
  16. console.log("退出全屏");
  17. }
  18. });*/
  19. //上面2个监听事件可根据项目需求2选1,然后调用此检测全屏方法
  20. function checkIsFullScreen(){
  21. var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
  22. return isFullScreen == undefined ? false : isFullScreen;
  23. }
  24. </script>

发表评论

表情:
评论列表 (有 0 条评论,1192人围观)

还没有评论,来说两句吧...

相关阅读