罗罗诺亚索隆
罗罗诺亚索隆
  • 发布:2017-04-28 17:20
  • 更新:2021-06-03 16:47
  • 阅读:14656

video视频,点击播放禁止自动全屏,点击全屏自动横屏播放

分类:HTML5+

点击播放禁止自动全屏

首先在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true。

"plus":{  
    "allowsInlineMediaPlayback": true  
}

然后在video标签中添加playsinline属性,然后测试得出iphone5s系统8.3上还是会自动全屏(其他的没有全部测试过,不太清楚),查了一圈后加上webkit-playsinline好了,
注意两个都加上,否则高低版本不兼容

<video controls="controls" preload="auto" playsinline webkit-playsinline src="" poster=""  width="100%" height="auto">  
</video>

点击全屏自动横屏播放

现在已经可以点击不全屏播放了,但是看着字幕太小看不清,想点开全屏看,发现不能横屏,还是很小看不清,才发现app被设置成了禁止横屏,这就尴尬了!经过一番查找还是被我找出在app禁止横屏的基础上,点击全屏横屏播放的解决办法了:
首先在manifest.json里设置

全部勾上,或者直接在manifest.json的plus节点下的distribute节点里添加:

"orientation": ["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"],/*应用支持的方向,portrait-primary:竖屏正方向;portrait-secondary:竖屏反方向;landscape-primary:横屏正方向;landscape-secondary:横屏反方向*/

然后在首页

plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏

所以app还是禁止横屏的

然后iOS上监听video元素的webkitbeginfullscreen与webkitendfullscreen事件,在全屏开始和结束时,对屏幕方向做相应的调整:

// iOS平台的视频全屏旋转  
var fullScreenOfIos = function(videoElem) {  
    // 监听的事件与Android平台有很大区别  
    videoElem.addEventListener('webkitbeginfullscreen', function() {  
        plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
    });  
    videoElem.addEventListener('webkitendfullscreen', function() {  
        plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏  
    });  
};

Android上监听webkitfullscreenchange事件,并且读取全屏元素,对屏幕方向做出调整:

// Android平台的视频全屏旋转  
var fullScreenOfAndroid = function() {  
         if(true) {  
        // 最新5+API的支持  
        var self = plus.webview.currentWebview();  
        self.setStyle({  
            videoFullscreen: 'landscape'  
        });  
    } else {  
                 document.addEventListener('webkitfullscreenchange', function() {  
                    var el = document.webkitFullscreenElement; //获取全屏元素  
                    if(el) {  
                        plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
                    } else {  
                        plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏  
                    }  
                });  
        }  
};

最后让我们来分别调用一下:

// 涉及到5+API的内容,均在plusready事件后调用;  
document.addEventListener('plusready', function() {  
    var osName = plus.os.name;  
    if(osName === 'Android') {  
        fullScreenOfAndroid();  
    } else if(osName === 'iOS') {  
        var videoElem = document.getElementById('video');  
        fullScreenOfIos(videoElem);  
    }  
});

大功告成!!!

5 关注 分享
小疯子呵 m***@msn.cn 1***@qq.com t***@protonmail.com 8***@qq.com

要回复文章请先登录注册

前端开发者福建

前端开发者福建

回复 1***@qq.com :
ResizeObserver loop limit exceeded------竖屏视频横批播放会报错,然后给你切回竖屏
2021-06-03 16:47
言浅情深

言浅情深

vue中的video标签点击全屏后会横屏播放,但是退出全屏后整个页面都处于横屏状态没有变回去,老哥们怎么破
2020-06-04 13:32
酷狗音乐人

酷狗音乐人

回复 万能的李大少 :
谁让你是万能的李少
2020-04-04 11:25
万能的李大少

万能的李大少

回复 1***@qq.com :
大哥你为什么在每个评论都要艾特我一下
2020-03-19 15:01
1***@qq.com

1***@qq.com

回复 万能的李大少 :
为什么我上传的是竖屏视频,然后点击全屏的话,会横竖屏一直切来切去,不知道你们会不会有这个情况,是什么问题呢
2020-03-12 14:17
1***@qq.com

1***@qq.com

为什么我上传的是竖屏视频,然后点击全屏的话,会横竖屏一直切来切去,不知道你们会不会有这个情况,是什么问题呢
2020-03-12 14:16
7***@qq.com

7***@qq.com

回复 万能的李大少 :
解决了么 我的也不行 直接自动全屏播放 我用的ckplayer 插件
2019-11-26 14:07
万能的李大少

万能的李大少

大佬你这个方法安卓手机可以直接横屏了,苹果的不行啊,横不了,还是放大竖屏播放
2019-10-16 17:33
1***@qq.com

1***@qq.com

回复 1***@qq.com :
ios 10.3版本
2018-04-02 13:28
1***@qq.com

1***@qq.com

ios 不行 啊,点击全屏 ,立马就退出全屏了
2018-04-02 13:25