给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"/> 旋转(横屏|竖屏)
注: 此属性只在声明了 x5videoplayertype="h5" 情况下生效
一:设置playsinline不全屏播放
<video id="videoplay"src={[require("./../../assets/laterImg/westlake.mp4")]}playsInline={true}//react项目中警告,所以把true用{}包起来了webkit-playsinline="true"//兼容iosx5-playsinline="true"//兼容安卓/>
二:设置 x5videoplayerfullscreen 全屏方式
<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"}
层级关系的布局有两种解决方法:一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。
而第一种方法却不是万能的,有时候我们需要将原本位于下层的元素移到另一个元素上方,那可以使用z-index;
而你说的不好用,则是zindex没有生效,没生效就是没有定义position属性,如果不想让元素的位置有所变化,就给赋予z-index属性的元素加上相对定位的position:relative