58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
||
import 'video.js/dist/video-js.css'
|
||
import { VideoPlayer } from '@videojs-player/vue'
|
||
import { ref } from 'vue'
|
||
import { Modal } from 'ant-design-vue'
|
||
|
||
defineOptions({ name: 'WxVideoPlayer' })
|
||
|
||
const props = defineProps({
|
||
url: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
})
|
||
|
||
const openVideo = ref(false)
|
||
|
||
// const handleEvent = (log) => {
|
||
// console.log('Basic player event', log)
|
||
// }
|
||
|
||
function playVideo() {
|
||
openVideo.value = true
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div @click="playVideo()">
|
||
<!-- 提示 -->
|
||
<div>
|
||
<Icon icon="ep:video-play" :size="32" class="mr-5px" />
|
||
<p class="text-sm">
|
||
点击播放视频
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 弹窗播放 -->
|
||
<Modal v-model:open="openVideo" title="视频播放" append-to-body>
|
||
<VideoPlayer
|
||
v-if="openVideo" class="video-player vjs-big-play-centered" :src="props.url" poster=""
|
||
crossorigin="anonymous" controls playsinline :volume="0.6" :width="800" :playback-rates="[0.7, 1.0, 1.5, 2.0]"
|
||
/>
|
||
<!-- 事件，暫時沒用
|
||
@mounted="handleMounted" -->
|
||
<!-- @ready="handleEvent($event)" -->
|
||
<!-- @play="handleEvent($event)" -->
|
||
<!-- @pause="handleEvent($event)" -->
|
||
<!-- @ended="handleEvent($event)" -->
|
||
<!-- @loadeddata="handleEvent($event)" -->
|
||
<!-- @waiting="handleEvent($event)" -->
|
||
<!-- @playing="handleEvent($event)" -->
|
||
<!-- @canplay="handleEvent($event)" -->
|
||
<!-- @canplaythrough="handleEvent($event)" -->
|
||
<!-- @timeupdate="handleEvent(player?.currentTime())" -->
|
||
</Modal>
|
||
</div>
|
||
</template>
|