【知识分享】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({

  // height: 100,

  // width: document.documentElement.clientWidth,

  playbackRates: [0.7, 1.0, 1.5, 2.0],

  autoplay: 'any', // 如果true,浏览器准备好时开始回放。

  muted: true, // 默认情况下将会消除任何音频。

  loop: true, // 导致视频一结束就重新开始。

  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

  language: 'zh-CN',

  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

  controls: true,

  controlBar: {

    timeDivider: true,

    durationDisplay: true,

    remainingTimeDisplay: false,

    fullscreenToggle: true // 全屏按钮

  }

})

const videoUrl = ref()

const getVideoUrlByCode = () => {

  request({

    url: 'fast-dynamicview/web/MdVideo/getVideoUrlByCode?code=' + props.code,

    method: 'get',

    showLoading: true

  })

    .then((response: any) => {

      console.log('测试数据：', props.code)

      videoUrl.value = response.data.data.url

      console.log('测试数据：', videoUrl.value)

    })

    .catch(() => {})

}

onMounted(() => {

  if (props.code) {

    getVideoUrlByCode()

  }

})

watch(

  () => props.code,

  (newValue, oldValue) => {

    getVideoUrlByCode()

  },

  { deep: true }

)

</script>