video同層播放層級過高遮擋模擬暫停按鈕的問題

不會飛的Porco發表於2019-02-16
IDE

在ios和android上有顯示的區別，如果你只是顯示一個普通的網頁，只需要在iOS上加上webkit-playsinline=”true” 安卓上x5-video-player-type=”h5″ x5-video-player-fullscreen=”true” x5-video-orientation=”portraint”，即可實現在微信上的同層播放；iOS和安卓顯示和播放沒有問題；
如果你跟我一樣想要把視訊放到swiper裡，且不是在第一頁播放視訊，並想要視訊有圓角。那麼問題就來了。首先在swiper非第一屏播放安卓會出現的問題是豎屏只有聲音沒有影像，我嘗試了好久只需要去掉安卓部分的同層播放程式碼即可，即去掉x5-video-player-type=”h5″；如果視訊在swiper裡，你肯定會有這樣的需求，就是滑動到非視訊頁的時候，暫停視訊，並出現一個模擬的暫停按鈕在視訊上方。這裡可以這樣寫：

const mySwiper = new Swiper(`.swiper-container`, {
    direction: `vertical`,
    on: {
      slideChangeTransitionEnd: function() {
        if (this.activeIndex != 1) {
          //暫停視訊程式碼
        }
      }
    }
  })

這裡定義一個是否顯示暫停的按鈕的變數showPoster，來顯示暫停模擬按鈕和隱藏video；
這裡顯示播放按鈕必須和視訊顯示必須呈反相關，因為不這樣作會有很多預設的bug，導致video_container的overflow:hidden不生效，無法顯示圓角，這算是一種比較圓滑的做法了；我試過將video的position設為fixed 這樣雖然能正常顯示和隱藏模擬的點選按鈕，但會讓父級的overflow：hidden失效。無法顯示視訊圓角。程式碼大概如下：

<div class="video_container">
<div class="clickVideo" @click="playVideo()" v-show="showPoster">
  <img src="../assets/點選播放按鈕.png"/>
</div> 
<video
  v-show="!showPoster" 
  src="../assets/QQ20181214-221408-HD.mp4"
  id="video"
  preload="auto"

  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint"

  airplay="allow"
  x-webkit-airplay="allow"

  playsinline="true" 
  webkit-playsinline="true"
  style="object-fit:fill"
>
<!-- 
  controls="controls" 待加
  poster="../assets/share.png"
  安卓同層播放屬性
  x5-video-player-type="h5" //啟用同層播放。取值固定為`h5`。  啟用之後僅安卓在swiper第二頁播放豎屏不顯示畫面所以這裡暫不用
  x5-video-player-fullscreen="true" //設定為 true 是防止橫屏
   x5-video-orientation="portraint" //豎屏 landscape 橫屏

  ios同層播放屬性
  airplay="allow"
  x-webkit-airplay="allow"
  playsinline="true" //IOS微信瀏覽器支援小窗內播放
  webkit-playsinline="true" // 這個屬性是ios 10中設定可以讓視訊在小窗內播放，也就是不是全屏播放
 -->
    </video>
</div>

<style lang="less">
    .video_container{
        @w: 670px/2;
        @h: 377px/2;
        @borderRadius: 50px;
        width:@w;
        height:@h;
        margin:100px auto;
        border-radius:@borderRadius;
        overflow: hidden;
        position: relative;
        .clickVideo{
          position: absolute;
          width:@w;
          height:@h;
          background:#ccc;
          z-index:999;
          & > img {
            @play:60px;
            width:@play;
            height:@play;
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%)
          }
        }
        video{
          width:@w;
          height:@h;
        }
    }
</style>

注：如果你在swiper的非第一頁使用視訊，在安卓手機上會出現視訊黑屏但可以播放聲音的問題，這個時候就可以不使用安卓的同層播放，即不使用x5-video-player-type=”h5″即可。
同層播放的資料參考連結：http://www.cnblogs.com/jinjin…

相關文章