H5中使用video注意事項

        <dir class="video-box-inner">
          <div class="video-play" @click="videoPlay" v-if="playIcon"></div>
          <!-- playsinline="true" 
          controls 
          x5-video-player-type="h5"
          x-webkit-airplay="true"
          controlslist="nofullscreen nodownload noremoteplayback"

          webkit-playsinline="true" IOS下防止全屏播放
          playsinline="true" 同上
          x-webkit-airplay="true" 支持ios的AirPlay功能
          x5-video-player-type="h5" 啓用同層H5播放器
          x5-video-player-fullscreen="true" 全屏設置
          x5-video-orientation="portraint" 豎屏
          style="object-fit:fill" 封面鋪滿
          -->
          <video
            v-if="videoUrl"
            id="myVideo"
            ref="video"
            webkit-playsinline="true"
            playsinline="true"
            x5-playsinline="true"
            x5-video-player-fullscreen="false"
            x5-video-player-type="h5"
            x5-video-orientation="portraint"
            width="100%"
            height="100%"
            style="vertical-align:top;object-fit: fill;"
            :poster="detail.pictureUrl"
            @click="videoPlay"
          >
            <source :src="videoUrl" type="video/mp4" />
          </video>
        </dir>

1.動態src不顯示問題：

使用 v-if 就可以了

2.自定義播放按鈕：樣式如下

  .video-box-inner {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .video-play {
    width: 130px;
    height: 130px;
    background: url('https://img.cdn.zhaoshang800.com/img/2020/03/26/broker/b65737cb-5458-47b3-b658-bccd893603e4.png');
    background-size: 100% 100%;
    position: absolute;
    top: 580px;
    left: 310px;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }

js點擊事件：

    videoPlay() {
      this.videoDoc = document.getElementById("myVideo");
      if (this.videoDoc.paused) {
        this.videoDoc.play();
        this.playIcon = false;
      } else {
        this.videoDoc.pause();
        this.playIcon = true;
      }
    },