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-resizable3.使用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
}
這樣就可以實現視頻窗口的放大縮小移動。
放大移動;
