封装视频以及监控组件

王小王和他的小伙伴

已于 2024-06-03 10:41:22 修改

阅读量614

点赞数

分类专栏： vue2 vue3 通用项目文章标签： vue.js

于 2023-07-18 17:04:44 首次发布

本文链接：https://blog.csdn.net/weixin_55042716/article/details/131791504

版权

vue2 vue3 通用项目专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.引入插件。

文件Git 地址：

https://gitee.com/wang-xiaowang123/liveplayer

插件
@liveqing/liveplayer-v3
在这里插入图片描述
.html 文件中

<script src="/assets/js/liveplayer-lib.min.js" exclude></script>
// liveplayer-lib.min.js 文件在Git仓库中

在这里插入图片描述

2.封装组件

LivePlayerDemo.vue

<template>
  <div style="width: auto; height: auto; margin: auto" class="palyer2">
    <LivePlayer ref="player2" live :video-url="flvurl" :controls="false" :aspect="aspect" />
  </div>
</template>
<script setup>
import LivePlayer from '@liveqing/liveplayer-v3'
const props = defineProps({
  flvurl: String,
  aspect: { type: String, default: '' }
})

let { flvurl, aspect } = toRefs(props)
</script>

<style scoped></style>

3.使用

<template>
    <div class="CameraPhoto">
        <LivePlayerDemo v-if="list.URL" :autoplay="true" :flvurl="list.URL" :poster="poster" />
        <img v-else :src="list.image" alt="" />
    </div>
</template>

<script setup>
import LivePlayerDemo from '@/components/LivePlayerDemo.vue'
const list = reactive({
		  id: '5',
          Name: '1',
          image: '/assets/img/common/videoSurve01.png',
          URL: 'ws://223.108.188.12:10800/ws-flv/hls.flv'
	})
const poster = '/assets/img/common/videoSurve01.png'
</script>

<style lang="scss" scoped>
  .palyer2 {
      width: 322px;
      height: 181px;
    img {
      width: 100%;
      height: 100%;
  	}
  }
</style>