【知识分享】Vue3使用Vue3VideoPlay 封装播放视频流的组件

1.安装

npm安装

npm i vue3-video-play --save

yarm安装

yarn add vue3-video-play --save

2.main.js中引入

// 引入video.js

import VueVideoPlayer from '@videojs-player/vue'

import 'video.js/dist/video-js.css'

3.代码案例

<template>

  <video-player :src="videoUrl" :options="playerOptions" :volume="0.6" />

</template>

<script lang="ts" setup>

import { request } from '@/core/utils/customRequest'

import { onMounted, ref, watch } from 'vue'

const props = defineProps({

  src: {

    type: String,

    default: 'http://221.226.14.26:83/openUrl/KqRGHYc/live.m3u8'

  },

  code: {

    type: String

  }

})

// 视频播放器配置

let playerOptions = ref({ </