vue 使用LivePlayer H5播放器播放m3u8格式视频

一、官方网址 https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8

二、安装依赖

npm install @liveqing/liveplayer

三、复制依赖文件

在node_modules下找到这三个文件

将他们复制到public文件夹下

四、在index.html中引入liveplayer-lib.min.js

<script src="js/liveplayer-lib.min.js"></script>

五、在vue组件中使用

<template>
    <div class="container">
      <!-- 视频播放 -->
    <div class="video-panel" v-if="showVideo">
      <div class="close-box">
        <img class="h-icon-close" :src="videoClose" @click="showVideo = false">
      </div>
      <LivePlayer :videoUrl="videoUrl" live muted stretch></LivePlayer>
    </div>
    </div>
</template>
<script>
  import LivePlayer from "@liveqing/liveplayer";

  export default {
    name: 'AMap',
    data() {
      return {
        videoClose: require('../assets/images/map/video-close.png'), //关闭video的标签
        videoUrl: 'http://10.42.1.149:4001/EUrl/NELzx7O/live.m3u8', //视频播放地址
        showVideo: true, //是否展示视频弹窗
      }
    },
    components: {
      LivePlayer
    },
    mounted() {
    },
    methods: {
      //视频播放
      async videoPlay() {
        this.showVideo = true
      },
    },
  }

</script>