h5视频背景-自动播放%26铺满背景

使用object-fit:fill做视频填满-css难点

 .move {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    overflow-x: hidden;
    z-index: 2;
    video {
      height: 100vh;
    }
  }
@media only screen and (min-width: 1200px) {
.page {
  .move {
    object-fit:fill;
        video {
        width: 100%;
        height: 100%;
    }
  }
}
}

处理在移动端视频自动播放

 <div class="move">
      <video id="video-content"  muted autoplay="true" loop="loop">
        <source
          src="https://www.hashnest.com/video/pool.mp4"
          type="video/mp4"
        />
      </video>
    </div>

muted

基于谷歌的安全性校验机制，可以允许自动播放，但是自动播放默认静音， 在chrome上测试良好

在移动端真机查看时， 背景视频卡住，无法自动播放，经过多次调试发现少了属性

playsinline -自动在原来文档流内播放

    <video id="video-content"  muted autoplay="true" loop="loop" playsinline>
        <source
          src="https://www.hashnest.com/video/pool.mp4"
          type="video/mp4"
        />
      </video>

开发细节完善

一般而言10s以上的视频，需要2s左右的加载时间， 所以初始进入网页可能会造成卡顿
我们可以加入加载loading， 通过监听视频是否加载完成，决定loading的变量修改的时间

  <div class="loading" v-show="state.loading">
    <img src="@/assets/favicon.jpeg" alt="" />
    <span>Cloud Mining</span>
      <n-spin size="large"  stroke="#000000"/>
  </div>

state.loading = true;
onMounted(() => {
  var vid = document.getElementById("myVideo");
  vid.oncanplaythrough = function () {
    state.loading = false
  };
});