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()) {
        // 创建 HLS 实例
        const hls = new Hls();

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

        // 将 HLS 实例绑定到 video 元素
        hls.attachMedia(video);

        // 监听事件：当 HLS 清单文件解析完成后自动播放
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log("HLS stream loaded successfully");
          video.play();
        });

        // 监听错误事件
        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可以正常播放

测试监控地址是否可以正常播放我使用的是工具 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 播放监控视频</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 播放监控视频</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()) {
      // 创建 HLS 实例
      const hls = new Hls();

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

      // 将 HLS 实例绑定到 video 元素
      hls.attachMedia(video);

      // 监听事件：当 HLS 清单文件解析完成后自动播放
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        console.log('HLS stream loaded successfully');
        video.play();
      });

      // 监听错误事件
      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>

总结

到此这篇关于vue项目中使用hls.js播放m3u8视频踩过坑的文章就介绍到这了,更多相关vue hls.js播放m3u8视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue使用video.js依赖接入视频流((hls(m3u8)、flv))的示例代码

axios全局注册,设置token,以及全局设置url请求网段的方法
今天小编就为大家分享一篇axios全局注册,设置token,以及全局设置url请求网段的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue绑定对象与数组变量更改后无法渲染问题解决
这篇文章主要介绍了Vue绑定对象与数组变量更改后无法渲染问题解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
vue项目引入antDesignUI组件实现
本文介绍了如何以Vue引入antDesignUI,主要包括下载安装、配置和引入组件等步骤,通过本文,读者可以快速了解antDesignUI在Vue中的应用,感兴趣的可以了解一下
2023-08-08
一文搞懂Vue3中的ref和reactive
Vue3中ref用于独立值或整体替换,reactive用于对象/数组的深度响应,访问方式不同,解构需用toRefs保持响应,团队应统一规范,按需选用,本文给大家介绍Vue3中的ref和reactive,感兴趣的朋友一起看看吧
2025-06-06
vue3 实现牙位图选择器的实例代码
这篇文章主要介绍了vue3 实现牙位图选择器的实例代码,代码简单易懂,需要的朋友参考下吧
2025-04-04
vue中的computed 和 vm.$data 原理解析
这篇文章主要介绍了vue中的computed 和 vm.$data 原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
使用Vue.js实现数据的双向绑定
在Vue.js中，双向数据绑定是一项非常强大的功能，它能够使数据和视图之间保持同步，让开发者更加方便地操作数据，在本文中，我们将介绍如何用Vue.js实现数据的双向绑定,需要的朋友可以参考下
2023-04-04
Vue 实现轮播图功能的示例代码
Vue是一款流行的前端框架，它提供了一系列的工具和组件，使得开发者可以更加便捷地创建交互式的Web应用程序，轮播图是Web应用程序中常见的一种交互式组件，本文将介绍如何使用Vue和第三方组件库 Element UI实现轮播图功能,需要的朋友可以参考下
2023-05-05
VueX mapGetters获取Modules中的Getters方式
这篇文章主要介绍了VueX mapGetters获取Modules中的Getters方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue选项卡切换登录方式小案例
这篇文章主要为大家详细介绍了vue选项卡切换登录方式小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09