H5关于IOS安卓app的mp4视频播放全屏解决方法

视频压缩可用格式化工厂，选择MP4;

添加文件：

按自己的需求选择视频的大小

都选定之后按确定键 ，接下来按开始，便会开始解压视频，剩下就慢慢等下载结束就好

接下来关于h5视频全屏竖屏播放的问题，

<video
  id="videoALL" 
  src="demo455.mp4" 
  poster="mv.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill"  width = "100%" /*h5自适应*/
  height = "auto"
  controls = "controls"
  controlslist = "nodownload" /*不启用下载按钮*/
  preload = "auto"
>
</video>


还有，如果在ios设备下的话会有一个很大的播放按钮，使用js无法隐藏，只能通过css来控制，但是，一旦隐藏，在ios下就无法播放。。

/*video::-webkit-media-controls-start-playback-button {*/
    /*display: none;*/
/*}*/

当然，关于H5播放器还有另外一套方法：

html:

<div class="video">
    <!--poster=""-->
    <video id="video" controls="controls"  poster="mv.jpg" controlslist="nodownload" preload="auto"  width="100%" height="auto" src="demo455.mp4">
        <!--<source src="http://zhongkang.meibbc.com:8088/hoyidemo/demo.mp4" type="video/mp4">-->
        <!--<source src="http://zhongkang.meibbc.com:8088/hoyidemo/demo.mp4" type="video/webm">-->
        <!--<source src="http://zhongkang.meibbc.com:8088/hoyidemo/demo.mp4" type="video/ogg">-->
        <!--<source src="http://zhongkang.meibbc.com:8088/hoyidemo/demo.mp4">-->

    </video>


</div>

js：  有个bug，ios设备下有时会无法播放，可能是视频太大的问题引起的。。。。。。

/**
 * 视频全屏播放旋转目前的逻辑
 * 视频全屏，即锁定屏幕为横屏。
 * 视频恢复，则解除屏幕方向的锁定。
 * 具体的切换，根据自己的实际业务做相应的操作。
 */
    // Android平台的视频全屏旋转
var fullScreenOfAndroid = function() {
        if(true) {
            // 最新5+API的支持
            var self = plus.webview.currentWebview();
            self.setStyle({
                videoFullscreen: 'landscape'
            });
        } else {
            // 如果暂未更新sdk，可以先使用差量升级等方式，做出兼容处理；
            // 旧版本下的兼容处理
            document.addEventListener('webkitfullscreenchange', function() {
                var el = document.webkitFullscreenElement; //获取全屏元素
                if(el) {
                    plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
                } else {
                    plus.screen.unlockOrientation(); //解除屏幕方向的锁定
                }
            });

        }
    };
// 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);
    }
});