Web全屏模式

BlackMass 发布于2019-08-02 11:16 / 2287人阅读

摘要：全屏为使用用户的整个屏幕展现网络内容提供了一种简单的方式。退出全屏模式方式一按或键退出全屏方式二自定义全屏退出逻辑按建退出全屏注意方法只存在于对象上，而不存在与事件事件触发的时刻的有个一是进入全屏时，二是退出全屏时。

MDN：全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式。这种API让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

概览

document.fullscreen

document.fullscreenElement

document.fullscreenEnabled

elem.requestFullscreen

document.exitFullscreen

document.onfullscreenchange

document.onfullscreenerror

属性 document.fullscreen

用于检测当前文档是否处于全屏模式，返回值为布尔类型

document.fullscreenElement

当前激活全屏模式的元素

document.fullscreenEnabled

当前文档是否支持全屏

方法 请求全屏模式

一个全屏的请求应该由一个具体的元素发出，以video元素为例，请求方式如下：

var elem = document.getElementById("video");
elem.addEventListener("click",function () {
    if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
});

MDN：全屏请求必须在事件处理函数中调用，否则将会被拒绝。

退出全屏模式

方式一：按 ESC 或 F11 键退出全屏

方式二：[keydown event] + document.exitFullscreen自定义全屏退出逻辑

// 按Enter建退出全屏
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    document.exitFullscreen();
  }
}, false);

注意：exitFullscreen方法只存在于document对象上，而不存在与elem

事件 onfullscreenchange

onfullscreenchange事件触发的时刻的有2个：一是进入全屏时，二是退出全屏时。也就是说如果全屏模式的状态发生了改变，那么onfullscreenchange事件就会被触发

document.onfullscreenchange = function ( event ) {
  console.log("全屏模式状态改变");
};

onfullscreenerror

当尝试在不支持全屏模式的元素上请求全屏时，则会发生错误，这个错误会触发onfullscreenerror事件

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失败");
};

验证onfullscreenerror事件最简单的方式就是：在事件监听器之外发起全屏请求。
因为全屏请求必须在事件处理函数中调用，否则将会被拒绝。在拒绝的同时会产生一个错误，这个错误会触发onfullscreenerror事件

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失败");
}; 

// requestFullscreen()将会失败，因为它在事件处理器之外
document.documentElement.requestFullscreen();

全屏样式

Gecko会自动为进入全屏模式的元素添加额外样式：width: 100%; height: 100%l; ，目的是使其铺满整个屏幕；而webkit没有这种默认行为，所以需要我们手动补充这个样式

#video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

兼容 PC端

移动端

前缀表1

表2

结语

本文绝大部分参考MDN文档，目的是整理Web全屏Api，非原创文章

原文地址：https://www.guoyunfeng.com/20...

云服务器 GPU云服务器全屏模式全屏 vps全屏 webrtc全屏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52875.html

Web全屏模式

摘要：全屏为使用用户的整个屏幕展现网络内容提供了一种简单的方式。退出全屏模式方式一按或键退出全屏方式二自定义全屏退出逻辑按建退出全屏注意方法只存在于对象上，而不存在与事件事件触发的时刻的有个一是进入全屏时，二是退出全屏时。 MDN：全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式。这种API让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并...

MoAir 2019-08-26 12:11 评论0 收藏0
知乎视频播放器开源了~

摘要：知乎视频播放器开源介绍是什么是一个基于的视频播放器，目前已在知乎和内使用，并在上开源。对于视频播放器中常见的首帧时长，缓冲次数等指标，可以通过接收事件来进行打点记录。结语所有的工作都会在上进行知乎内部使用的也是同一个仓库。知乎视频播放器 Griffith 开源介绍 Griffith 是什么？ Griffith 是一个基于 React 的视频播放器，目前已在知乎 web 和 mobil...

RebeccaZhong 2019-08-23 16:43 评论0 收藏0