html5 如何在ios 和安卓端视频全屏

先上代码  html部分

<div class="video">        <video id="video1" preload poster="benzvideoshow/img/0.jpg?201701250033" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" webkit-playsinline playsinline="true" src="media/benz1.mp4?201701261153"></video>        </div>

再解释一下对应的属性

x5-video-player-type
启用同层播放。取值固定为'h5'

x5-video-player-fullscreen
是否全屏。取值为'true'或'false'。


x5-video-orientation
视频方向。取值分别为'landscape'、'portrait'或者'landscape|portrait'，分别对应横屏、竖屏及自动旋转（这个应该用的少）。


但是上面对应的只是对应X5浏览器内核，非ios相关平台，下面是ios相关平台的属性

1. airplay

2. x-webkit-airplay

3. playsinline

4. webkit-playsinline

其中最后两个是iOS平台下的内联播放属性，都是布尔属性，不需要赋值（存在即是true）；前两个是iOS平台下airplay的相关属性（说实话我现在也没搞明白为什么网页需要airplay属性），取值为'allow'或'deny'，通常保险起见用'allow'就可以。

微信在同层接入规范中提到了object-position这个属性，用于设置视频出现的位置。实际在尝试的过程中，搭配object-fit属性同时使用的效果会比较好。但这两个属性并不是x5私有属性，而是原生的，所以它们同时适用于Android和iOS两个平台。

object-position和object-fit这两个元素主要的作用是为“可替换元素”设置位置和大小。这里的“可替换元素”，指的是内容不受CSS显式控制的元素，比如比较典型的就是<img>、<object>、<video>和表单元素等。

说回视频播放。微信官方的同层接入规范中推荐的做法，是用js动态计算需要的像素值，然后给object-position属性赋值。而我自己尝试了一圈下来，发现object-position这个属性本身支持百分比取值，通常视频默认的值是'50% 50%'，也就是居中；全屏视频一般情况下需要贴底放，所以要把取值改成'0 100%'。

另一个属性object-fit，有点类似background-size属性，用来设置视频在容器内的填充方式，平时用只需要取值'contain'（保持宽高比填满容器）就可以了。不过这里需要留意的是，全屏下，由于视频一般都不会正好填满屏幕（宽高比差异以及输出分辨率没算顶部标题栏），会在顶部留下一条空隙。这条空隙通常是默认黑色的，如果需要更改颜色，首先要加上个'display:block;'（因为video默认是inline的），然后直接改background-color就OK~

下面讲一下同层浏览器事件规范

x5videoenterfullscreen进入全屏通知

myVideo.addEventListener("x5videoenterfullscreen", function(){  alert("player enterfullscreen");})

x5videoexitfullscreen退出全屏通知

myVideo.addEventListener("x5videoexitfullscreen", function(){  alert("player exitfullscreen");})

使用同层播放器的一些建议

1. 监听resize 事件实现自适应视口大小变化，视频播放时会调整视口大小

2. 在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外

3. 对于直播类全屏视频，最好不要在最顶部放交互性元素