vue3使用vue3-video-play播放m3u8视频

1.安装vue3-video-play

 npm install vue3-video-play --save

2.在组件中使用

import 'vue3-video-play/dist/style.css';
import VideoPlay from 'vue3-video-play';

// 视频配置项
const options = reactive({
   src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', //视频源
   muted: false, //静音
   webFullScreen: false,
   speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
   autoPlay: true, //自动播放
   loop: false, //循环播放
   mirror: false, //镜像画面
   ligthOff: false, //关灯模式
   volume: 0.3, //默认音量大小
   control: true, //是否显示控制器
   poster: '',
   type: 'm3u8',
});

3.使用拖拽移动组件vue3-draggable-resizable，将视频放入这个盒子中，可以自由拖动位置，调节大小

npm install vue3-draggable-resizable

4.使用vue3-draggable-resizable

import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

const x = ref(1000);
const y = ref(0);
const w = ref(100);
const h = ref(100);
const active = ref(false);
const disabledX = ref(false)
const print = (val) => {
  console.log(val)
}

5.结合使用vue3-draggable-resizable和vue3-video-play

<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>
            <VideoPlay v-bind="options" width="100%" height="100%"/>
        </div>
      </Vue3DraggableResizable>

其中VideoPlay的宽度和高度都写为100%，这样视频的大小就可以跟随窗口的大小放大缩小

效果图：

放大一下：

完美呈现。

完整代码：

<template>
  <div>
      <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>
            <VideoPlay v-bind="options" width="100%" height="100%"/>
        </div>
      </Vue3DraggableResizable>
  </div>

</template>
<script setup>

import { ref, toRef, reactive } from 'vue';
import { onMounted, onUnmounted } from '@vue/runtime-core';
import { anchorEmits } from "element-plus";
const emit = defineEmits(['showEcharts']);
import { Message } from 'view-ui-plus';

import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

const x = ref(1000);
const y = ref(0);
const w = ref(100);
const h = ref(100);
const active = ref(false);
const disabledX = ref(false)
const print = (val) => {
  console.log(val)
}

const cunzai = ref(false);
//关闭视频
function close() {
  cunzai.value = false
}
//打开视频
function dakai() {
  if (cunzai.value == true) {
    cunzai.value = false
  } else {
    cunzai.value = true
  }
}

import 'vue3-video-play/dist/style.css';
import VideoPlay from 'vue3-video-play';

// 视频配置项
const options = reactive({
   src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', //视频源
   muted: false, //静音 
   webFullScreen: false,
   speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
   autoPlay: true, //自动播放
   loop: false, //循环播放
   mirror: false, //镜像画面
   ligthOff: false, //关灯模式
   volume: 0.3, //默认音量大小
   control: true, //是否显示控制器
   poster: '',
   type: 'm3u8',
});


</script>