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))的示例代码

vue.js+Echarts开发图表放大缩小功能实例
本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
vue3 中使用vue img cutter 图片裁剪插件的方法
这篇文章主要介绍了vue3 中使用vue img cutter 图片裁剪插件的方法,首先安装依赖,构建 components/ImgCutter.vue 组件,需要的朋友可以参考下
2024-05-05
Element-UI清空表单及验证不生效的问题解决
本文主要介绍了Element-UI清空表单及验证不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
vue中遇到的坑之变化检测问题（数组相关）
这篇文章主要介绍了vue中遇到的坑之变化检测问题（数组相关），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
详解element-ui日期时间选择器的日期格式化问题
这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题，本文用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，有兴趣的一起来了解一下
2019-04-04
解决Vue在Tomcat8下部署页面不加载的问题
今天小编就为大家分享一篇解决Vue在Tomcat8下部署页面不加载的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
基于 Vue 的树形选择组件的示例代码
本篇文章主要介绍了基于 Vue 的树形选择组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue3使用TypeIt实现文字打字机效果的代码示例
在现代网页设计中,文字打字机效果是一种非常流行的动画效果,能够吸引用户的注意力并提升用户体验,本文将介绍如何在 Vue 3 中使用 TypeIt 库实现文字打字机效果,并分享一些实用的技巧和示例,需要的朋友可以参考下
2025-01-01
vue如何使用vant组件的field组件disabled修改默认样式
这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue前端vue.config.js简介
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，本文重点介绍VUE前端vue.config.js简介，感兴趣的朋友跟随小编一起看看吧
2023-01-01