56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
|
|
import { IconifyIcon } from '@vben/icons';
|
|
|
|
import { VideoPlayer } from '@videojs-player/vue';
|
|
import { Modal } from 'ant-design-vue';
|
|
|
|
import 'video.js/dist/video-js.css';
|
|
|
|
defineOptions({ name: 'WxVideoPlayer' });
|
|
|
|
const props = defineProps<{
|
|
url: string;
|
|
}>();
|
|
|
|
const dialogVideo = ref(false);
|
|
|
|
function playVideo() {
|
|
dialogVideo.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 微信消息 - 视频播放 -->
|
|
<div class="cursor-pointer" @click="playVideo()">
|
|
<!-- 提示 -->
|
|
<div class="flex items-center">
|
|
<IconifyIcon icon="mdi:play-circle" :size="32" class="mr-2" />
|
|
<p class="text-sm">点击播放视频</p>
|
|
</div>
|
|
|
|
<!-- 弹窗播放 -->
|
|
<Modal
|
|
v-model:open="dialogVideo"
|
|
title="视频播放"
|
|
:footer="null"
|
|
:width="850"
|
|
destroy-on-close
|
|
>
|
|
<VideoPlayer
|
|
v-if="dialogVideo"
|
|
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]"
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
</template>
|