vue video播放m3u8源_chc高清电影m3u8_外码斯迪的博客-CSDN博客

注意：

客户给了监控的直播源列表文件，就是一个网址

<template>
  <div>
    <div class="some">{{ one }}</div>
    <!-- <video
      width="600"
      autoplay
      muted
      controls
      loop
      src="https://cmgw-"
    ></video> -->
  </div>

  <div>
    <video ref="videoPlayer" id="videoPlayer"></video>
  </div>
</template>

<script setup lang="ts">
import videojs from "video.js"
import "video.js/dist/video-js.css"

import { ref, onMounted } from "vue"


//播放器的配置选项
const playerOptions = {
  autoplay: true,
  muted: true,
  loop: true,
  sources: [
    {
      type: "application/x-mpegURL",
      src: "https://cmgw-vpc.lechange.com:8890/LCO/.m3u8?proto=https"
    }
  ],
  controlBar: {
    timeDivider: true,
    fullscreenToggle: true
  }
}
const one = ref("haha")

onMounted(() => {
  //拿到dom
  const playDom: any = document.getElementById("videoPlayer")
  // 用插件拿到实例对象
  const player: any = videojs(playDom, playerOptions)
  //播放
  player.play()
})
</script>

<style lang="scss" scoped>
.some {
  border-style: $BORDER;
  background: $BG;
  color: red;
}
</style>

这样直播的实时视频就可以播放了，感觉很简单