ios移动端 FullScreen

最新推荐文章于 2024-08-16 10:57:14 发布

么灬名字

最新推荐文章于 2024-08-16 10:57:14 发布

阅读量2.8k

点赞数

分类专栏：兼容浏览器移动端文章标签： ios全屏 FullScreen

本文链接：https://blog.csdn.net/weixin_45021098/article/details/93201566

版权

兼容同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

浏览器

4 篇文章 0 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

ios移动端 FullScreen

在开发视屏video时，我们有时需要让视频全屏播放，正常PC及移动安卓的方法为：

//进入全屏
function FullScreen() {
    var ele = document.documentElement;
    if (ele .requestFullscreen) {
        ele .requestFullscreen();
    } else if (ele .mozRequestFullScreen) {
        ele .mozRequestFullScreen();
    } else if (ele .webkitRequestFullScreen) {
        ele .webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen() {
    var de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

但是在苹果手机里FullScreen是不支持，我们需要用webkitEnterFullscreen来解决：

var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    var y = $('#video').find('video')
    if(isiOS){ //判断是否为ios终端
      y[0].webkitEnterFullscreen() // 开启全屏
      y[0].play()
    }