vue+js实现视频淡入淡出效果

<template>  <div class="video-css">    <div class="videocss" ref="videodom" style="background-color:black;">      <video width="100%" ref="play" style="opacity: 1" :src="videoSrc2"></video>    </div>    <div class="video-but">      <el-button type="primary" @click="play()">播放</el-button>      <el-button type="primary" @click="pause()">暂停</el-button>      <el-button type="primary" @click="fadeIn(100)">淡入</el-button>      <el-button type="primary" @click="fadeOut(100)">淡出</el-button>    </div>  </div></template><script>export default {  data() {    return {      videoSrc: require('../../assets/web_1496003377.mp4'),      videoSrc2: require('../../assets/video.mp4')    }  },  methods: {    play() {      this.$refs.play.play()    },    pause() {      this.$refs.play.pause()    },    fadeIn(speed) {      let that = this      var speed = speed || 30 ;      var num = 0;      var st = setInterval(function(){        num++;        that.$refs.play.style.opacity = num/10;        if (num>=10) {            clearInterval(st);        }      }, speed);    },    fadeOut(speed) {      let that = this      var speed = speed || 30 ;      var num = 10;      var st = setInterval(function(){        num--;        that.$refs.play.style.opacity = num / 10 ;        if (num<=0){           clearInterval(st);        }      }, speed);    }  }}</script><style lang="less" scoped>.video-css {  .videocss {    width: 800px;    height: 450px;    display: flex;    justify-content: center;  }  .video-but {    display: flex;    margin-top: 20px;    justify-content: flex-start;    align-content: flex-start;  }}</style>