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

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

article 2024/12/28 3:18:45

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
}

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