创意H5案例之全屏视频解决方案

仿朋友圈页面嵌入全屏视频案例地址

qp.png

页面效果

安卓苹果不同系统进入H5页面由一个控制按钮进入全屏视频部分播放，没有进度条浮现。

video标签代码

<video
            id="videoALL"
            src="http://lady.pcvideo.com.cn/pclady/vpclady/2017/11/07/1510040265697-vpclady-79507-1_3.mp4"
            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" /*可以让图片或者视频适应外部容器>
    </video>

参考文档