h5 音频视频全屏设置

浪里白条那片海

已于 2022-11-01 20:19:53 修改

阅读量1.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js h5 文章标签：视频全屏 h5 video

于 2018-11-28 17:16:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_37806077/article/details/84587743

js 同时被 2 个专栏收录

50 篇文章

订阅专栏

6 篇文章

订阅专栏

本文详细介绍了HTML5中用于实现网页元素全屏显示的API，包括开启和关闭全屏的方法，以及如何检测当前页面是否处于全屏状态。同时，文章提供了在不同内核浏览器下使用这些API的前缀说明，帮助开发者实现跨浏览器的全屏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5规范允许用户自定义网页上任一元素全屏显示。
1、Node.requestFullScreen() 开启全屏显示
2、Node.cancelFullScreen() 关闭全屏显示

由于其兼容性原因，不同浏览器需要添加前缀如：

   webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，
       如chrome浏览器。
   Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
   3、document.fullScreen检测当前是否处于全屏
   不同浏览器需要添加前缀
   document.webkitIsFullScreen、document.mozFullScreen
   全屏伪类选择器
   :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
   .box:-webkit-full-screen {
           background-color: blue;
       }
   //全屏
   open.addEventListener('click', function () {

// html全屏
// document.documentElement.webkitRequestFullScreen();

           // 任意盒子全屏
           box.webkitRequestFullScreen();
       });

// 关闭全屏
cancel.addEventListener('click', function () {

// document.documentElement.webkitCancelFullScreen();

// box.webkitCancelFullScreen();

// 只能通过document才能调用关闭方法
document.webkitCancelFullScreen();

       });
   // 检测当前是否处于全屏
       check.addEventListener('click', function () {
           // 返回值为true或false
           alert(document.webkitIsFullScreen);
       });