账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    自定义video插件,全屏时控制条被遮挡
    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插件中,全屏时控制条被遮挡,可能是由于以下原因:

      1. 视频大小超过屏幕大小:当video元素的宽度或高度超过屏幕的宽度或高度时,控制条会被遮挡。

      2. 视频宽度或高度小于屏幕宽度或高度:当video元素的宽度或高度小于屏幕的宽度或高度时,控制条会被隐藏。

      3. 控制条的位置设置不当:在video元素中,控制条的位置可能被设置为固定的位置,导致控制条被遮挡。

      解决这个问题的方法是:

      1. 重新调整video元素的宽度或高度,使其与屏幕宽度或高度相匹配。

      2. 调整控制条的位置,使其在视频元素中可见。

      3. 在HTML中添加额外的CSS样式,使其在全屏时可见。

      例如,如果你想要在全屏时显示控制条,你可以添加以下样式:

      css video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; }

      在这个例子中,视频元素的位置设置为固定,顶部和底部为0,宽度和高度为100%,这样控制条就会出现在视频的全屏位置。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部