其他分享
首页 > 其他分享> > video视频,点击播放禁止自动全屏,点击全屏自动横屏播放(转载)

video视频,点击播放禁止自动全屏,点击全屏自动横屏播放(转载)

作者:互联网

首先在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);  
    }  
});

 

注:本人安卓亲测可用


转载自dcloud社区:
作者:罗罗诺亚索隆
原文地址:https://ask.dcloud.net.cn/article/1343
声明:本博文只用于知识分享与传递信息,如涉及作品内容、版权和其它问题,请在30日内与本人联系,我将在第一时间删除内容!

 

标签:primary,点击,横屏,plus,全屏,portrait,播放,landscape
来源: https://www.cnblogs.com/fanqiuzhuji/p/13038628.html