uniapp webview 视屏全屏横屏播放

原因

将uniapp打包成安卓和苹果客户端，其中的一个页面采用webview的方式引入，相当于用iframe引入一个页面，其中页面才用了h5的video标签进行视频的播放，奇怪的是点击全屏，视频不会自动横屏播放，于是乎就有了这篇文章。

打包设置

首先我们的应用所有页面都是竖屏查看的，通过pages.json中配置globalStyle："pageOrientation": "portrait" 应用打包后，所有页面包括webview引入的都强制为竖屏播放。通过设置"pageOrientation": "auto",将手机横屏放置，页面就会全部横屏播放，包括webview引入的页面，也就是页面中的video点击全屏时，将手机横过来，就可以横屏播放了。但是前提时将手机可以自动旋转的开关打开，这样不符合实际场景。webview提供了一个jsbuild的功能，通过调用plus实例，点击全屏时，强制手机横屏，这样就能解决不能自动横屏。

plus实例

在引用的页面中加入如下js

<script>
    var fullScreenOfAndroid = function() {
        // 最新5+API的支持
        var self = plus.webview.currentWebview();
        self.setStyle({
            videoFullscreen: 'landscape'
        });
    };
    // iOS平台的视频全屏旋转
    var fullScreenOfIos = function(videoElem) {
        // 监听的事件与Android平台有很大区别
        videoElem.addEventListener('webkitbeginfullscreen', function() {
            plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
        });
        videoElem.addEventListener('webkitendfullscreen', function() {
            plus.screen.unlockOrientation(); //解除屏幕方向的锁定
        });
    };
    // // 涉及到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);
        }
      }
      

     

    });


</script>

uniapp页面

<web-view :src="videoUrl" ></web-view>

pages.json

"globalStyle": {
		"pageOrientation": "portrait",
                }