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>
相关推荐
菜鸟一枚在这1 小时前
深入解析设计模式之单例模式
开发语言·javascript·单例模式
ObjectX前端实验室2 小时前
个人网站开发记录-引流公众号 & 谷歌分析 & 谷歌广告 & GTM
前端·程序员·开源
CL_IN2 小时前
企业数据集成:实现高效调拨出库自动化
java·前端·自动化
浪九天3 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
qianmoQ3 小时前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
C#Thread4 小时前
C#上位机--流程控制(IF语句)
开发语言·javascript·ecmascript
尚学教辅学习资料4 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
椰果uu4 小时前
前端八股万文总结——JS+ES6
前端·javascript·es6
微wx笑4 小时前
chrome扩展程序如何实现国际化
前端·chrome
~废弃回忆 �༄4 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器