如何让WebView中的Html5 Video全屏播放

html-css014

如何让WebView中的Html5 Video全屏播放,第1张

用JS。

在页面加载完成后 获取浏览器高度以及宽度，再设置VIDEO元素高度宽度即可。

<script type="text/javascript">

        function resizeBody() {

            var bodyHeight = document.documentElement.clientHeight

            $("#Flash1").height(bodyHeight + "px")

            $("body").height(bodyHeight + "px")

        }

        $(function () {

            resizeBody()

        })

    </script> <body style=" width:100% height:100%" onresize="resizeBody()">

效果要求 ：按住按钮视频全屏播放，松开暂停；

iOS；

<video id="video" style=" object-fit: fill" preload="auto"  x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" preload="auto" width=100%height=100%  src="图片地址"></video>

效果预览

android

<video id="video2" style=" object-fit: fill" preload="auto" autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"  width=100%height=100%src="图片地址">  </video>

Android上不能像苹果一样在浏览器里内嵌播放视频，会加载一个视频播放器全屏播放；

效果预览

相关属性介绍 点击这里

object-fit介绍 点击这里

在需要显示遮盖视频框video的时候

给div设置 宽 高、overflow:hidden将video放到上面的div里，并设置position:absolutetop:-100000px 给置出去div，它就看不见了

在需要显示video时，再设置回position和top的值就行了

我测试了，可以用，我在手机端就这么用的

<video src="https://hy.v.netease.com/2018/1030/5c9caed3eea6c6e079673d031fca3350qt.mp4" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint"></video>

各个属性的参考如下：

controls="controls"

x5-playsinline=""    ？？？？？

playsinline="true"

webkit-playsinline="true"

x-webkit-airplay="true"

x5-video-player-type="h5"   

x5-video-player-fullscreen=""

x5-video-orientation="portraint"

<videox5-video-orientation="landscape|portrait"/>  旋转（横屏|竖屏）

注: 此属性只在声明了 x5­video­player­type="h5" 情况下生效

一：设置playsinline不全屏播放

<video      id="videoplay"src={[require("./../../assets/laterImg/westlake.mp4")]}playsInline={true}//react项目中警告，所以把true用{}包起来了webkit-playsinline="true"//兼容iosx5-playsinline="true"//兼容安卓/>

二：设置 x5­video­player­fullscreen 全屏方式

<video id="videoplay"src="xxx"x5-video-player-type="h5"x5-video-player-fullscreen="true"/>

注意：需要重新监听resize事件监听窗口大小变化

window.onresize=function(){videoplay.style.width=window.innerWidth+"px"videoplay.style.height=window.innerHeight+"px"}