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>