vue項目中使用hls.js播放m3u8視頻踩過的坑小結

更新時間：2025年07月23日 09:36:13 作者：LIU雷

hls.js是一個用于在瀏覽器中播放HLS（HTTP?Live?Streaming）視頻流的JavaScript庫,這篇文章主要介紹了vue項目中使用hls.js播放m3u8視頻踩過坑的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

安裝依賴

npm install video.js videojs-contrib-hls

一、vue項目中代碼片段，作為組件使用

<!-- 視頻 -->
<template>
  <div class="video-box">
    <!-- 視頻播放器 -->
    <video id="video" controls autoplay width="100%" height="100%"></video>
  </div>
</template>

<script>
import Hls from "hls.js";
import popWrapper from "@/components/popWrapper";

export default {
  name: "videoPop",
  data() {
    return {
    };
  },
  created() {},
  mounted() {
    // 攝像頭視頻彈窗傳值
    this.bus.$on("videoOpen", (row) => {
      this.showWtck(row);
    });
  },
  methods: {
    videoClose() {
      this.showOceanVideo = false;
    },
    // 攝像頭視頻彈窗傳值 sxtbh
    async showWtck() {
     this.videoPlay();
      this.showOceanVideo = true;
    },
    videoPlay(index) {
      // 獲取 video 元素
      const video = document.getElementById("video");
      // HLS 流地址
      const videoSrc = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';//測試開源地址 注：視頻格式需要時164的，web端此方法不支持165
      // 檢查是否支持 HLS.js
      if (Hls.isSupported()) {
        // 創(chuàng)建 HLS 實例
        const hls = new Hls();

        // 加載 .m3u8 文件
        hls.loadSource(videoSrc);

        // 將 HLS 實例綁定到 video 元素
        hls.attachMedia(video);

        // 監(jiān)聽事件：當 HLS 清單文件解析完成后自動播放
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log("HLS stream loaded successfully");
          video.play();
        });

        // 監(jiān)聽錯誤事件
        hls.on(Hls.Events.ERROR, (event, data) => {
          this.videoPlay()
          console.error("HLS error:", data);
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        // 如果瀏覽器原生支持 HLS（如 Safari）
        video.src = videoSrc;
        video.addEventListener("loadedmetadata", () => {
          console.log("Native HLS playback supported");
          video.play();
        });
      } else {
        alert('您的瀏覽器不支持播放此視頻。')
        console.error("Your browser does not support HLS playback.");
      }
    },
  },
  beforeDestroy() {
  },
};
</script>

<style lang='scss' scoped>
.video-box {
  height: 700px;
  margin-bottom: 30px;
  overflow: auto;
}
</style>

二、以下是H5的Demo可以直接運行

直接復制代碼，驗證一下提供方的視頻地址是否有誤

此處踩過坑 265格式web端不能播放，資源格式264可以正常播放

測試監(jiān)控地址是否可以正常播放我使用的是工具 VLC media player，我是圖方便在電腦管家下載的

(H265)

h264

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HLS.js 播放監(jiān)控視頻</title>
  <!-- 引入 hls.js -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f4;
    }
    video {
      max-width: 100%;
      max-height: 100%;
      border: 1px solid #ccc;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div>
    <h1 style="text-align: center;">HLS.js 播放監(jiān)控視頻</h1>
    <!-- 視頻播放器 -->
    <video id="video" controls autoplay width="640" height="360"></video>
  </div>

  <script>
    // 獲取 video 元素
    const video = document.getElementById('video');

    // HLS 流地址
    // const videoSrc = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';//測試開源地址
    // const videoSrc = 'http://cmgw-vpc.lechange.com:8888/LCO/9C07128PAG4B9E2/0/1/20250324T021313/openhz0735a494162c4ba6bb287d7b6a5f4bb7.m3u8?source=open';//大華提供地址165
    const videoSrc = 'http://cmgw-vpc.lechange.com:8888/LCO/9C07128PAGC1657/0/0/20250324T015744/openhz136dd7fbc6484a5095579ba383b035bb.m3u8?source=open';//大華提供地址164

    // 檢查是否支持 HLS.js
    if (Hls.isSupported()) {
      // 創(chuàng)建 HLS 實例
      const hls = new Hls();

      // 加載 .m3u8 文件
      hls.loadSource(videoSrc);

      // 將 HLS 實例綁定到 video 元素
      hls.attachMedia(video);

      // 監(jiān)聽事件：當 HLS 清單文件解析完成后自動播放
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        console.log('HLS stream loaded successfully');
        video.play();
      });

      // 監(jiān)聽錯誤事件
      hls.on(Hls.Events.ERROR, (event, data) => {
        console.error('HLS error:', data);
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      // 如果瀏覽器原生支持 HLS（如 Safari）
      video.src = videoSrc;
      video.addEventListener('loadedmetadata', () => {
        console.log('Native HLS playback supported');
        video.play();
      });
    } else {
      console.error('Your browser does not support HLS playback.');
    }
  </script>
</body>
</html>