- 26
- 0
业务中,自己做了一个 根据自己产品的UI的video标签,也跟自定义视频控制条设计了功能,但是发现,视频全屏功能点击后 在FF和IE、Opera都会把z-index提到最大,挡住了我自定义的控制条(我把自定义的控制条的z-index也设置成最大),chrome就没事。问下怎么解决
<div class="box">
<div class='Dvideo'>
<video :src='source' autoplay width="900" height="550" preload="auto" poster="static/loading.gif" ref="video" @click='playVideo' @dblclick='maxVideo'></video>
</div>
<div class="controlBar">
<div class="playOrPause" @click='playVideo'><i class="iconfont icon-pause" v-show='playOrPause'></i><i class="iconfont icon-bofang2" v-show='!playOrPause'></i>
<span class="PauseTip">Pause</span>
</div>
<div class="next" @click='next'>
<i class="iconfont icon-ai09"></i>
<span class="NextTip">Next</span>
</div>
<div class="loadingBar">
<div class="progressBar" ref='progressBar' @click='proBarPos'>
<div class="timeBar" :style="'width:' + timeBarWidth"><span ref='timeBall'></span></div>
<div class="bufferBar" :style="'width:' + bufferBarWidth"></div>
</div>
</div>
<div class="playTime">{{currentTime}} / {{totalTime}}</div>
<div class="voiceControl">
<div class="voiceBtn" @click='mute'>
<i class="iconfont icon-shengyinxianxing"></i>
<div class="voiceTip">静音</div>
</div>
<div class="voiceBar" @click='changeVolume'>
<div class="totalVoice" ref='volumeBar'>
<div class="currentVoice" :style="'width:' + volumeWidth + '%'"><span ref='volumeBall'></span></div>
</div>
</div>
</div>
<div class="max" @click='maxVideo'>
<i class="iconfont icon-quanping"></i>
<span class="maxScreenTip">Full screen</span>
</div>
</div>
</div>
.video
position fixed
top 0
left 0
height 100%
width 100%
z-index 6
.videoContainer
width 900px
height 550px
position fixed
z-index: 100
left 50%
top 50%
transform translate(-50%, -50%)
font-size 0
.box
position relative
width 100%
height 100%
.Dvideo
position absolute
left 0
top 0
z-index 7
video
background-color #000
&::-webkit-media-controls
display none !important
.controlBar
width 100%
position absolute
font-size 0
bottom 0
background-color rgba(0,0,0,.6)
height 24px
z-index 2147483650
text-align center 0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
和寂寞相愛り 普通会员 1楼
在video插件中,全屏时控制条被遮挡,可能是由于以下原因:
-
视频大小超过屏幕大小:当video元素的宽度或高度超过屏幕的宽度或高度时,控制条会被遮挡。
-
视频宽度或高度小于屏幕宽度或高度:当video元素的宽度或高度小于屏幕的宽度或高度时,控制条会被隐藏。
-
控制条的位置设置不当:在video元素中,控制条的位置可能被设置为固定的位置,导致控制条被遮挡。
解决这个问题的方法是:
-
重新调整video元素的宽度或高度,使其与屏幕宽度或高度相匹配。
-
调整控制条的位置,使其在视频元素中可见。
-
在HTML中添加额外的CSS样式,使其在全屏时可见。
例如,如果你想要在全屏时显示控制条,你可以添加以下样式:
css video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; }在这个例子中,视频元素的位置设置为固定,顶部和底部为0,宽度和高度为100%,这样控制条就会出现在视频的全屏位置。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
