浏览器全屏

香菊网 发表于: 2019-11-15 分类: js部分  H5部分  前端front  

引言:

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

var Promise = Element.requestFullscreen(options);
options : 一个FullscreenOptions对象提供切换到全屏模式的控制选项。目前,唯一的选项是navigationUI,这控制了是否在元素处于全屏模式时显示导航条UI。默认值是"auto",表明这将由浏览器来决定是否显示导航条。

兼容:

PC端

Feature Chrome Edge Firefox Internet Explorer Edge Opera Safari
Basic support (Yes)webkit[1] (Yes) 9.0 (9.0) as mozRequestFullScreen[2]
47.0 (47.0) (behind full-screen-api.unprefix.enabled
11ms[3] (Yes)[3] ? ?

移动端

Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 9.0 (9.0) as mozRequestFullScreen[2]
47.0 (47.0) (behind full-screen-api.unprefix.enabled
? ? ?

用法:

调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,返回的Promise会resolve,并且该元素会收到一个fullscreenchange事件,通知它已经进入全屏模式。如果全屏请求被拒绝,返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。如果该元素已经从原来的文档中分离,那么该文档将会收到这些事件。

方法 :

// 调出全屏

function toFullVideo(){
  let videoDom = document.documentElement;
  if(videoDom.requestFullscreen){
  
    //W3C
    return videoDom.requestFullscreen();

  }else if(videoDom.webkitRequestFullScreen){

    //Chrome等
    return videoDom.webkitRequestFullScreen();

  }else if(videoDom.mozRequestFullScreen){

    //FireFox 
    return videoDom.mozRequestFullScreen();

  }else{

    // Edge || ie11
    return videoDom.msRequestFullscreen();

  }
}

// 退出全屏

if (document.exitFullscreen) {  
    document.exitFullscreen();  
}  
else if (document.mozCancelFullScreen) {  
    document.mozCancelFullScreen();  
}  
else if (document.webkitCancelFullScreen) {  
    document.webkitCancelFullScreen();  
}
else if (document.msExitFullscreen) {
      document.msExitFullscreen();
}

注意:这个方法只能在用户交互或者设备方向改变的时候调用,否则将会失败。

 

是否全屏监听

 

document.addEventListener("fullscreenchange", function () {  
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);  
   
document.addEventListener("mozfullscreenchange", function () {  
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);  
   
document.addEventListener("webkitfullscreenchange", function () {  
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);

 

本文出自香菊网(http://www.xiangjv.top)

标签: js部分H5部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮