在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 自定義video插件,全屏時控制條被遮擋

自定義video插件,全屏時控制條被遮擋

業(yè)務(wù)中,自己做了一個 根據(jù)自己產(chǎn)品的UI的video標簽,也跟自定義視頻控制條設(shè)計了功能,但是發(fā)現(xiàn),視頻全屏功能點擊后 在FF和IE、Opera都會把z-index提到最大,擋住了我自定義的控制條(我把自定義的控制條的z-index也設(shè)置成最大),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
回答
編輯回答
半心人

你不是說了把你自己的代碼的z-index手動調(diào)到最大了么

2018年5月25日 06:10