qiaobi/src/views/home/components/videoDemo/videoDemo.vue

<template>
    <div class="videoDemo" :style="`background-image:url(${require('@/assets/image/background.png')})`">
        <video v-if="isPlay" ref="videoDom" width="100%" height="100%" controls muted preload="auto" crossorigin="anonymous">
            <source :src="videoSrc" type="video/mp4">
            您的浏览器不支持视频标签。
        </video>
        <div class="playVideo" v-if="!isPlay" >
            <div class="button">
                <el-button class="btn" @click="play">播放视频</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {
  },
  props: {},
  data() {
    return {
        // videoSrc: require('@/assets/media/yanshi.mp4'),
        videoSrc: '',
        isPlay:false,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    
  },
  methods: {
    play(){
        this.$message.warning('敬请期待')
        return
        this.isPlay = true
        this.$nextTick(()=>{
            console.log(this.$refs.videoDom.play)
            this.$refs.videoDom.play() 
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.videoDemo{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
.playVideo{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color:rgba(238, 228, 228, 0.2);
}
.button{
    width: 80px;
    height: 50px;
    position: absolute;
    inset: 0;
    margin: auto; 
    .btn{
        background-color:rgba(238, 228, 228, 0.2);
        color: black;
        font-weight: bold;
    }
}
</style>