Uniapp -Vue直播推流播放

安装

import Hls from 'hls.js';

视频框

<template>
  <div class="video-container">
    <video ref="videoPlayer" controls></video>
  </div>
</template>

使用 hls.js 初始化视频流

在 Vue 组件的 mounted 钩子中，您可以使用 hls.js 初始化视频流。例如：

export default {
  // ... 其他组件选项
  mounted() {
    var video = this.$refs.videoPlayer;
    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource('https://bo.*******.cn/live/abcde123456.m3u8');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'https://bo.**********.cn/live/abcde123456.m3u8';
      video.addEventListener('loadedmetadata', function() {
        video.play();
      });
    }
  }
};