全屏模式

简介: 全屏模式

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事件。

相关文章
|
安全 Linux 应用服务中间件
[笔记]CentOS7 vsftpd安装及配置使用
[笔记]CentOS7 vsftpd安装及配置使用
1072 0
|
8月前
|
存储 容灾 关系型数据库
PolarDB开源数据库进阶课11 激活容灾(Standby)节点
本文介绍了如何激活PolarDB容灾(Standby)节点,实验环境依赖于Docker容器中用loop设备模拟共享存储。通过`pg_ctl promote`命令可以将Standby节点提升为主节点,使其能够接收读写请求。激活后,原Standby节点不能再成为PolarDB集群的Standby节点。建议删除对应的复制槽位以避免WAL文件堆积。相关操作和配置请参考系列文章及视频教程。
158 1
|
数据安全/隐私保护
支付系统29-------支付宝支付-----支付成功异步通知---接收通知
支付系统29-------支付宝支付-----支付成功异步通知---接收通知
|
6月前
|
人工智能 安全 开发者
2025 年 WordPress 本地部署工具深度测评:3 大高效实践方案解析
随着 WordPress 6.4 的普及,本地开发工具向智能化、场景化发展。个人开发者追求零配置启动,企业团队需标准化方案。技术演进聚焦容器化整合、AI 辅助决策与边缘计算适配。深度测评中,WordPress Studio 适合快速原型开发,Websoft9 面板适用于企业级管理,Bulk Plugin Installer 提升批量部署效率。2025 年行业趋势显示容器化、AI 辅助及边缘计算支持成为主流,选型应结合项目规模与安全需求。
228 0
|
10月前
|
人工智能 自然语言处理 前端开发
openai 12天发布会收官 | AI大咖说
OpenAI这12天的发布会,并没有太多特别令人惊喜的内容,可能是前面的惊喜太多了。更多的是,让ChatGPT越来越侧重参与现实中的应用,真正赋能改变生活,包括projects项目管理,canvas文档写作,接入电话,接入ios,接入桌面,接入搜索,以及chatGPT桌面和更多应用的交互。 以及更多的多模态的延展,视觉vision,语音,视频sora。 在最后收官中,宣布新一代的O3和O3-mini更强的推理模型
273 11
|
11月前
|
数据采集 缓存 测试技术
性能测试中,除了迭代次数,还有哪些因素会影响测试结果?
性能测试中,除了迭代次数,还有哪些因素会影响测试结果?
338 2
线性代数——(期末突击)行列式(下)-行列式按行展开、范德蒙行列式、克拉默法则
线性代数——(期末突击)行列式(下)-行列式按行展开、范德蒙行列式、克拉默法则
660 7
|
XML JSON 前端开发
深入对比TOML,JSON和YAML
坦率地说,在我开始与Hugo TOML合作之前,我感到羞耻是一个需要发现的新领域,但我对YAML和JSON非常熟悉。本文将帮助您了解如何通过不同的数据格式构建数据。       在Hugo中,您可以将所有这三种数据格式用于配置,前置事项和自定义数据,但TOML是用于整个项目的推荐格式。
10270 179
|
存储 安全 算法
|
Linux 开发工具 git
CentOS 安装 nvm
CentOS 安装 nvm
832 3