博客

当我们在写页面样式，常常会用到图片或者视频作为页面的背景。但是使用背景视频时，往往不会全屏展示，两侧有黑边，如下图

（为了清晰的看到不是全屏展示，我使用了红色背景色）

那么这是我们该如何处理？

第一种方法很简单，对于单一色调的背景视频，如上图，视频背景色黑色，把么我们就可以使用黑色背景色填充，达到鱼目混珠的效果。但是此方法不适应多色、渐变色等视频。

第二种方法，通过js更改视频的样式，如下

window.onresize = () => {
      const windowWidth = document.body.clientWidth;
      const windowHeight = document.body.clientHeight;
      const windowAspectRatio = windowHeight / windowWidth;
      let videoWidth;
      let videoHeight;
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth;
        videoHeight = videoWidth * 0.5625;
        this.fixStyle = {
          height: windowWidth * 0.5625 + "px",
          width: windowWidth + "px",
          "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
          "margin-left": "initial",
        };
      } else {
        videoHeight = windowHeight;
        videoWidth = videoHeight / 0.5625;
        this.fixStyle = {
          height: windowHeight + "px",
          width: windowHeight / 0.5625 + "px",
          "margin-left": (windowWidth - videoWidth) / 2 + "px",
          "margin-bottom": "initial",
        };
      }
    };
window.onresize();

html

<video   
        id="myVideo"
        class="video-js vjs-default-skin vjs-big-play-centered"
        autoplay
        loop
        :style="fixStyle"
      >
        <source :src="videourl" type="video/mp4" />
</video>

这样就可以去除两侧的黑边了，使视频全屏播放