43 lines
929 B
Vue
43 lines
929 B
Vue
|
<template>
|
||
|
|
<el-dialog v-model="dialogVisible" title="播放视频" width="820px" :destroy-on-close="true" @closed="clearVideo">
|
||
|
|
<video ref="videoRef" class="resource-player" :src="videoUrl" controls autoplay />
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { nextTick, ref } from 'vue'
|
||
|
|
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const videoUrl = ref('')
|
||
|
|
const videoRef = ref<HTMLVideoElement>()
|
||
|
|
|
||
|
|
const open = async (url: string) => {
|
||
|
|
videoUrl.value = url
|
||
|
|
dialogVisible.value = true
|
||
|
|
await nextTick()
|
||
|
|
videoRef.value?.load()
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearVideo = () => {
|
||
|
|
if (videoRef.value) {
|
||
|
|
videoRef.value.pause()
|
||
|
|
videoRef.value.removeAttribute('src')
|
||
|
|
videoRef.value.load()
|
||
|
|
}
|
||
|
|
videoUrl.value = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
open
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.resource-player {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
max-height: 68vh;
|
||
|
|
background: #000;
|
||
|
|
}
|
||
|
|
</style>
|