·您当前的位置:主页 > 技术教程 > 微信视频 >

[html5]HTML5全屏与退出全屏的API(2)

时间:2017-12-29 14:58csdn.net
请注意: exitFullscreen 只能通过 document 对象调用 而不是使用普通的 DOM element. Fullscreen 属性与事件 一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。 document.

请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element.

Fullscreen 属性与事件
一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。

  • document.fullscreenElement:  当前处于全屏状态的元素 element.
  • document.fullscreenEnabled:  标记 fullscreen 当前是否可用.

当进入/退出 全屏模式时,会触发 fullscreenchange 事件:

  1. var fullscreenElement =    
  2.     document.fullscreenEnabled   
  3.     || document.mozFullscreenElement   
  4.     || document.webkitFullscreenElement;   
  5. var fullscreenEnabled =    
  6.     document.fullscreenEnabled   
  7.     || document.mozFullscreenEnabled   
  8.     || document.webkitFullscreenEnabled;   

在初始化全屏方法时,可以探测需要监听哪一个事件.

Fullscreen CSS
浏览器提供了一些有用的 fullscreen CSS 控制规则:

  1. /* html */   
  2. :-webkit-full-screen {   
  3.   /* properties */   
  4. }   
  5. :-moz-fullscreen {   
  6.   /* properties */   
  7. }   
  8.    
  9.    
  10. :fullscreen {   
  11.   /* properties */   
  12. }   
  13.    
  14.    
  15. /* deeper elements */   
  16. :-webkit-full-screen video {   
  17.   width: 100%;   
  18.   height: 100%;   
  19. }   
  20.    
  21.    
  22. /* styling the backdrop */   
  23. ::backdrop {   
  24.   /* properties */   
  25. }   

在某些情况下,WebKit需要一些特殊处理,所以在处理多媒体时,你可能需要上面的代码。

我认为 Fullscreen API 超级简单,超级有用. 我首次见到这个 API 是在一个名为 MDN's BananaBread demo 的全客户端第一人称射击游戏, 这真是一个使用全屏模式的绝佳案例。
全屏API提供了进入和退出全屏模式的方式,并提供相应的事件来监测全屏状态的改变,所以各方面都连贯起来了.

请记住这个很好的API吧 —— 在未来的某个时刻,它肯定会派上用场!

来源:http://blog.csdn.net/renfufei/article/details/17657093

热门文章推荐

请稍候...