videojs播放m3u8格式的视频，处理 HLS 推流延时问题

最新推荐文章于 2026-05-15 09:22:24 发布

原创

最新推荐文章于 2026-05-15 09:22:24 发布 · 5k 阅读

标签

#vue.js #javascript #音视频 #前端

收录于

本文介绍了HLS直播协议的工作原理，分析了推流延时的原因，并详细探讨了在前端使用videojs播放m3u8格式视频时，由于页面加载与服务器生成流的时间差导致的播放错误。为解决这个问题，提出了在组件挂载时设置定时器等待流生成的策略。

HLS 直播协议的原理理解：

把整个视频流分成一个个小的基于HTTP的视频ts文件，每个视频文件地址会在m3u8格式的链接里对应生成一个索引，在开始一个流媒体会话时，客户端通过m3u8文件的索引去寻找可用的媒体流，实现直播效果；

分析延时原因：

服务器端的编码器和流分割器生成TS视频文件需要时间，推流时也会受到带宽的影响，所以就产生了延时，

分析视频组件工作流程：

请求接口获取 hlsUrl ，此时服务器开始生成TS视频文件并推流；
挂载视频组件，
播放视频，

这里就会产生一个问题，页面获取 hlsUrl 到挂载视频组件的时间快于服务器生成流的时间，就会导致视频组件挂载后，hlsUrl 中还未生成索引，产生 videojs 报错源链接无效

解决：

可以在挂载时加一个定时器，确保先有流再播放

代码：

<template>
  <div
    class="view-warp"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="header">
      <div class="title">摄像头1号</div>