vue html先播放一个欢迎视频再显示页面内容

vue yekong

html

    <video v-show="showvideo" id="video" muted class="shipin" autoplay="autoplay" controls="controls">
        <source src="dist/video/loginvideo.mp4" type="video/mp4"/>
    </video>

css

.shipin {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  object-fit: fill;
}
//屏蔽播放按钮
video::-webkit-media-controls {
  display: none !important;
}

js

mounted: function () {
        var that = this;
        监听视频播放,视频播放完成后隐藏
         if (that.showvideo) {
            var elevideo = document.getElementById("video");
            elevideo.addEventListener('ended', function () {
                 that.showvideo = false
            }, false);
        } else {
            that.showvideo = false
        }
    },
喜欢