vue2 项目中嵌入视频

案例：

ps:  视频存放在静态文件夹里面

    public文件夹：一般用于存放一些静态资源文件，例如图片，视频，音频等资源文件。需要特别注意的是webpack在进行打包的时候，会将public中的所有静态资源原封不动的进行打包

代码：

<template>
 <div class="schematicDiagramIndex">
   <el-container>
     <el-aside width="20rem">
<!--       <h4 style="font-size: 18px">视频演示</h4>-->
       <div style="height: 100%;overflow-y: scroll">
         <el-input
             placeholder="输入关键字进行过滤"
             v-model="filterText"
         >
         </el-input>

         <el-tree
             class="filter-tree"
             :data="CompanyLeftData"
             :props="defaultProps"
             default-expand-all
             :expand-on-click-node="false"
             :default-checked-keys="[1]"
             highlight-current
             node-key="value"
             @node-click="handleNodeClick"
             :filter-node-method="filterNode"
             ref="treeList"
             :height="heights"
         >

         </el-tree>

       </div>

     </el-aside>
<!--     :height="heights"-->
     <el-divider direction="vertical" style="border: 1px solid #ccc; }" ></el-divider>
     <el-main>
       <!-- 视频 -->
       <video
           id="video1"
           controls
           class="video1"
           loop="loop"
           ref="video"
           :height="heights"
       >
         <source  :src="video" type="video/mp4"  />
         您的浏览器不支持 HTML5 video 标签。
       </video>
     </el-main>
   </el-container>
 </div>
</template>

<script>
export default {
 name: 'schematicDiagramIndex',
 data () {
 return {
   defaultProps: {
     children: "children",
     label: "label",
     id: "ID",
   },
   CompanyLeftData:[
     {
       value: '1',
       label: '油泵车',
       children: [
         {
           value: '1-1',
           label: '双系统独立自循环',
         },
         {
           value: '1-2',
           label: '箱体组成',
         },
         {
           value: '1-3',
           label: '电气系统组成',
         },
         {
           value: '1-4',
           label: '双系统合流自循环',
         },
         {
           value: '1-5',
           label: '液压系统排气',
         },
         {
           value: '1-6',
           label: '液压系统组成',
         },
         {
           value: '1-7',
           label: '动力系统组成',
         },
         {
           value: '1-8',
           label: '油液固体颗粒污染自检和取样检测',
         },
         {
           value: '1-9',
           label: '双系统独立输出',
         },
         {
           value: '1-10',
           label: '双系统合流输出',
         },
         {
           value: '1-11',
           label: '双系统合流输出',
         },
       ],
     },
     {
       value: '2',
       label: '电源车',
       children: [
         {
           value: '2-1',
           label: '',
         },
       ],
     },
   ],
   filterText:"",
   video:"",
   heights:"",//高度
 }
 },
 created() {
 },mounted() {
    this.$nextTick(() => {
      this.$refs.treeList.$el.getBoundingClientRect().top; //表格距离浏览器的高度
      // this.$refs.video.$el.getBoundingClientRect().top; //表格距离浏览器的高度
      // 根据浏览器高度设置初始高度
      this.heights =
          window.innerHeight - this.$refs.treeList.$el.offsetTop - 150 ;
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights =
            window.innerHeight - this.$refs.treeList.$el.offsetTop - 150 ;
      };
      console.log(this.heights, 1);
    });
    this.setCurrentKeyData()
  },
  methods: {
   //进行切换数据（点击事件）
   handleNodeClick(data, checked) {
     this.$refs.video.load()
     if (checked) {
       //进行勾选的数据
       this.$refs.treeList.setCheckedNodes([data]);
       this.video="/static/oil-"+data.value+".mp4"
     }
   },
   //进行模糊查询
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
   //  默认选中
   setCurrentKeyData() {
     this.$nextTick(() => {
       this.$refs.treeList &&
       this.$refs.treeList.setCurrentKey(this.CompanyLeftData[0].children[0].value);
       this.handleNodeClick(this.CompanyLeftData[0].children[0], true);
     });
   },
 },
 computed: {},
  watch: {
    filterText(val) {
      this.$refs.treeList.filter(val);
    }
  },
}
</script>

<style scoped>
 .schematicDiagramIndex{
     width: 100%;
   /*height: 100%;*/
     /*height: 45rem ;*/
 }
 .video1{
   width: 100%;
   /*height: 85%;*/
 }
 ::v-deep .el-tree-node__content {
   color: black;
   font-size: 14px;
   font-weight: 400;
   margin: 5px;
 }

 /*::v-deep .el-input__wrapper {*/
 /*  background-color: transparent !important;*/
 /*}*/

 ::v-deep .el-tree {
   background-color: transparent;
   --el-tree-node-hover-bg-color: #b5b7b7;
   margin-top: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
   /*background: url("@/assets/imgList/memuBG.png") no-repeat;*/
   background-size: 100% 100%;
 }

 ::v-deep
 .el-tree--highlight-current
 .el-tree-node.is-current
 > .el-tree-node__content {
   background-color: #1a518c;
   color: #fcfbfb;
 }

 .filter-tree {
   padding-top: 1%;
   /*height: 44rem;*/
   /*height: 100%;*/
 }
</style>

参考：HTML video autoplay 属性 | 菜鸟教程