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日内与本人联系，我将在第一时间删除内容！