全屏模式

简介: 全屏模式

iOS Safari 没有全屏 API,但 Chrome(Android 版)、Firefox 和 IE 11+ 上则有相应的 API。

打造全屏体验时需要在意的主要 JS API 如下:

  1. element.requestFullscreen():以全屏模式显示元素。
  2. document.exitFullscreen():取消全屏模式。
  3. document.fullscreenElement:如有任何元素处于全屏模式,返回 true。

应用进入全屏模式时,无法再使用浏览器的 UI 控件。 全屏模式下的浏览器没有前进和后退这样的标准导航控件,也没有刷新按钮可以显示。

<body>
  <div>hello world</div>
  <button id="goFS">全屏</button>
  <script>
    const goFS = document.getElementById("goFS");
    goFS.addEventListener("click", function () {
      document.body.requestFullscreen();
      // 为了兼容要写两套
      document.documentElement.requestFullscreen();
    }, false);
  </script>
</body>

让 video 元素进入全屏模式与让任何其他元素进入全屏模式的方法完全相同。 只需调用 video 元素上的 requestFullscreen 方法。

<body>
  <video id="videoElement"></video>
  <button id="goFS">全屏</button>
  <script>
    const goFS = document.getElementById("goFS");
    goFS.addEventListener("click", function () {
      const videoElement = document.getElementById("videoElement");
      videoElement.requestFullscreen();
    }, false);
  </script>
</body>

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

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

相关文章
|
存储 分布式计算 资源调度
2022年最强大数据面试宝典(全文50000字,建议收藏)(一)
复习大数据面试题,看这一套就够了!
3097 0
|
11月前
|
存储 机器学习/深度学习 算法
|
JavaScript 前端开发 安全
TypeScript中的枚举类型有哪些优点和缺点
【8月更文挑战第4天】 TypeScript中的枚举类型有哪些优点和缺点
400 3
线性代数——(期末突击)行列式(下)-行列式按行展开、范德蒙行列式、克拉默法则
线性代数——(期末突击)行列式(下)-行列式按行展开、范德蒙行列式、克拉默法则
1068 7
|
监控 网络安全
网页显示HTTP错误503怎么办?HTTP错误503解决方法
HTTP 503错误表示服务器暂时无法处理请求,通常是由于服务器过载或维护导致。常见解决方法包括:1. 等待一段时间再刷新页面;2. 检查服务器负载;3. 确认服务器是否在维护;4. 检查配置错误;5. 联系服务提供商。通过这些步骤,用户和管理员可以有效排查并解决该问题。
17941 3
Echarts中横坐标文字显示不全
本文讨论了在ECharts中横坐标文字显示不全的问题,并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后,横坐标上的所有标签都会显示,而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法,并附有官方文档链接。
1705 4
Echarts中横坐标文字显示不全
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
应用服务中间件 nginx
Nginx隐藏版本号
修改nginx.conf配置文件 nginx配置文件里增加 server_tokens off;server_tokens作用域是http server location语句块server_tokens默认值是on,表示显示版本信息,设置server_tokens值是off,就可以在所有地方隐藏nginx的版本信息。
6217 0
|
算法 Python
python实现多元线性回归,以2022数模国赛为例(实战必看,附源代码)
python实现多元线性回归,以2022数模国赛为例(实战必看,附源代码)
964 0
python实现多元线性回归,以2022数模国赛为例(实战必看,附源代码)
|
SQL 关系型数据库 MySQL
Github Star 过万!用这款免费工具代替收费的Navicat,我看行
Github Star 过万!用这款免费工具代替收费的Navicat,我看行
Github Star 过万!用这款免费工具代替收费的Navicat,我看行