当前位置：首页 > news >正文

vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)

news 2025/6/20 18:32:55

1.安装video-player

npm install video.js @videojs-player/vue --save

在main.js中配置全局引入

// 导入视频播放组件
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'const app = createApp(App)
// 视频播放组件
app.use(VueVideoPlayer)

2.安装拖拽组件vue3-draggable-resizable

npm install vue3-draggable-resizable

3.使用vue3-draggable-resizable

<template><div id="app"><div class="parent"><Vue3DraggableResizable:initW="110":initH="120"v-model:x="x"v-model:y="y"v-model:w="w"v-model:h="h"v-model:active="active":draggable="true":resizable="true"@activated="print('activated')"@deactivated="print('deactivated')"@drag-start="print('drag-start')"@resize-start="print('resize-start')"@dragging="print('dragging')"@resizing="print('resizing')"@drag-end="print('drag-end')"@resize-end="print('resize-end')">This is a test example</Vue3DraggableResizable></div></div>
</template><script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({components: { Vue3DraggableResizable },data() {return {x: 100,y: 100,h: 100,w: 100,active: false}},methods: {print(val) {console.log(val)}}
})
</script>
<style>
.parent {width: 200px;height: 200px;position: absolute;top: 100px;left: 100px;border: 1px solid #000;user-select: none;
}
</style>

具体使用方法可查看官方文档：vue3-draggable-resizable/docs/document_zh.md at main · a7650/vue3-draggable-resizable · GitHub

首先去掉右上角的缩放句柄，将一个按钮放在右上角，这样我们就可以随时使用v-if关闭这个拖拽窗口，将视频放入拖拽窗口中，代码：

<Vue3DraggableResizable v-if="cunzai" :lockAspectRatio="true":handles="['tl', 'tm', 'mr', 'ml', 'bl', 'bm', 'br']" :initW="320" :initH="180" :minW="320" :minH="180"v-model:x="x" v-model:y="y" v-model:w="w" v-model:h="h" v-model:active="active" :draggable="true":resizable="true" :parent="true" @activated="print('activated')" @deactivated="print('deactivated')"@drag-start="print('drag-start')" @resize-start="print('resize-start')" @dragging="print('dragging')"@resizing="print('resizing')" @drag-end="print('drag-end')" @resize-end="print('resize-end')"><div class="close" @click="close()"><Icon size="20" color="#1196db" type="md-close-circle" /></div><div><video-player v-if="modal1" :controls="true" :autoplay="false" :src="videoSrc" :options="playerOptions":volume="0.6" /></div></Vue3DraggableResizable>

视频部分代码：

// 视频链接地址
const videoSrc = ref('url');  //自定义url
// 视频播放器配置
let playerOptions = ref({height: 250,width: 250, playbackRates: [0.7, 1.0, 1.5, 2.0], autoplay: false, muted: true, loop: true, preload: 'auto', language: 'zh-CN',aspectRatio: '16:9', fluid: true, notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controls: true,controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true // 全屏按钮}
})
const cunzai = ref(false);
//关闭视频
function close() {cunzai.value = false
}

这样就可以实现视频窗口的放大缩小移动。