数据可视化大屏 项目开发中，经常需要背景视频来进行页面装饰，为了避免视频对主页面的代码干扰，视频背景进行单独的封装。在需要的地方直接引用就可以了。

视频动画渲染

组件代码

<template>
  <div class="shipin">
    <video id="video" loop="true" muted class="shipin" autoplay="autoplay" controls="controls">
      <source src="../assets/bg.mp4" type="video/mp4"/>
    </video>
  </div>
</template>

<script>
export default {
  name: "videobg",
  data() {
    return {}
  },
  watch: {},
  mounted() {
  },
}
</script>

<style lang="scss">
.shipin {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  object-fit: fill;
  z-index: -1;
  top: 0;
  left: 0;
}

//屏蔽播放按钮
video::-webkit-media-controls {
  display: none !important;
}
</style>