Fullscreen API：全屏操作
2024-09-07 04:48:55
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("videoElement"));:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();
var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
videoElement.requestFullScreen();
} else {
console.log('浏览器当前不能全屏');
}
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});:-webkit-full-screen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:full-screen { /*pre-spec */
/* properties */
}
:fullscreen { /* spec */
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
} 最新文章
- linux 下安装tomcat
- Linux_用户/用户组
- C# abstract function VS virtual function?
- 【转】ThinkPHP 页面跳转
- Robot framework的介绍
- 生成二维码的js以及调用打印插件
- 数据标准化/归一化normalization
- spring boot2 kafka
- shell编程规范：引用
- SQL SERVER镜像配置（包含见证服务器）
- week4
- External component has thrown an exception
- 如何去除WIN7任务栏项目上右键菜单中的最近访问一栏
- Linux性能分析 vmstat基本语法
- Mongo Rocks 在SSD盘上表现优秀,专门为SSD盘的优化
- JS返回数组种类和个数（面试常问）
- js学习笔记25----Event对象
- easyui datagrid行内编辑
- pymsql与ORM--python操作MySQL之利器
- zookeeper的概念和基础