//安装
npm install video.js @videojs-player/vue --save
//全局引入
//main.ts
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
const app = createApp(App);
app.use(VueVideoPlayer)
实现代码
<script setup lang="ts">
import { ref } from 'vue';
const visibly = ref(false)
const handleClose = () => {
visibly.value = false
}
const videoUrl = ref()
const openDialog = (val:string) => {
videoUrl.value = val
visibly.value = true
}
defineExpose({openDialog})
</script>
<template>
<el-dialog
v-model="visibly"
title="宣传视频播放"
width="800px"
@close="handleClose"
>
<div class="content">
<!-- poster: 封面url -->
<!-- src: 视频url -->
<video-player
poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
src="https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4"
class="video-player vjs-big-play-centered" //播放按钮居中展示
controls
:loop="true"
:volume="0.6"
></video-player>
</div>
</el-dialog>
</template>
<style lang="scss">
.content {
width: 100%;
height: 550px;
.video-js {
//设置视频高宽
width: 100%;
height: 530px;
}
}
</style>
效果图