vue3播放m3u8格式hls监控流

最新推荐文章于 2025-03-25 10:03:23 发布

会飞的鱼—

最新推荐文章于 2025-03-25 10:03:23 发布

阅读量1.1k

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_47657875/article/details/142951131

版权

1. 摄像头的hls监控流不同于普通m3u8的视频，video标签，iframe，videojs，vue-video-player无法解析

2. 解决办法更换LivePlayer插件官网https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property

3. 说明，按照官网文档的vue安装教程试了一遍，仍旧报错，故采用静态引入方式

4. 下载源码压缩包地址

https://www.liveqing.com/docs/download/LivePlayer.html

5. 把相关文件放到public目录下，并在index.html中引入liveplayer-element.min.js

5. 封装vue播放组件

<template>
  <div class="w100 h100">
    <live-player
      @message="messageError"
      @error="playError"
      id="player01"
      :video-title="cameraName"
      :video-url="videoUrl"
      :live="true"
      stretch="true"
    ></live-player>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const emit = defineEmits(["PlayError"])
const props = defineProps({
  videoUrl: {
    type: String,
    required: true, // 确保这个 prop 是必需的
  },
  cameraName: {
    type: String,
    required: false, // 摄像头名称
  }
})
function initializePlayer() {
  const player = document.getElementById('player01');

  player.addEventListener('snapOutside', evt => {
    console.log('获取快照 base64 数据', evt.detail[0]);
  });

  player.addEventListener('customButtons', evt => {
    console.log('自定义按钮点击回调 按钮名称', evt.detail[0]);
  });

  player.addEventListener('fullscreen', evt => {
    console.log('fullscreen', evt.detail[0]);
  });

  player.addEventListener('play', evt => {
    console.log('play, t = ', evt.detail[0] + 's', ', duration = ', player.getVueInstance().getDuration() + 's');
  });
}
function playError() {
  console.log('播放错误');
}
function messageError(msg) {
  console.log('播放错误', msg);
  emit("PlayError", true)
}

onMounted(() => {
  console.log('liveplayer-element.min.js 加载完毕');
  initializePlayer();
})





</script>

<style scoped>
/* 你可以在这里添加 CSS 样式 */
</style>

6. 传入地址可正常播放流视频（画面不予展示）