easydo-mes-web/src/components/scUpload/videoViewer.vue

<template>
	<teleport to="body">
		<div class="el-image-viewer__wrapper" :tabindex="-1" ref="imageViewer" style="zIndex: 9999;">
			<div class="el-image-viewer__mask" @click.self="hideOnModal && $emit('close')"></div>
			<span class="el-image-viewer__btn el-image-viewer__close" @click="$emit('close')">
				<el-icon><el-icon-close /></el-icon>
			</span>
			
			<div class="el-image-viewer__canvas">
				<sc-video class="el-image-viewer__img" :src="'/minio' + videoUrl" autoplay></sc-video>
			</div>
		</div>
	</teleport>
</template>

<script>
import "element-plus/es/components/image-viewer/style/css"

export default {
    emits: ["close"],

    props: {
        hideOnModal: { type: Boolean, default: false }, // 是否支持通过点击遮罩层关闭
        hideOnEscape: { type: Boolean, default: false }, // 是否支持通过按下ESC关闭
        videoUrl: { type: String, default: "" }
    },

    data() {
        return {}
    },

    created() {
        document.addEventListener("keydown", this.keydownHandler);
    },

    beforeUnmount() {
        document.removeEventListener("keydown", this.keydownHandler);
    },

    methods: {
        keydownHandler(e) {
            this.hideOnEscape && e.code == "Escape" && this.$emit("close");
            e.preventDefault();
        }
    }
}
</script>

<style lang="scss" scoped>
.el-image-viewer__canvas {
    padding: 12%;
}
</style>