uni-app中h5无法展示m3u8监控视频，或者需要很久才能展示出来

uni-app中h5无法展示m3u8监控视频，或者需要很久才能展示出来

示例代码：

<video class="v-video" id="myVideo" src="http://lmt.ilxjy.com:6211/M3ULIVE/314VHLY5.m3u8?mytest" title="314VHLY5" controls></video>

操作步骤：

<video class="v-video" id="myVideo" src="http://lmt.ilxjy.com:6211/M3ULIVE/314VHLY5.m3u8?mytest" title="314VHLY5" controls></video>

预期结果：

  1. h5、app可以正常展示m3u8监控视频，而且初始不是黑屏的—旧版本虽然可以打开，但是app刚进去的时候界面时黑的；
  2. h5、app可以正常上传视频，且速度较快

实际结果：

  1. h5无法展示m3u8监控视频或者需要很久才能展示出来；—早期旧版本没问题
  2. h5上传11M左右的视频很慢；—早期旧版本没问题

bug描述：

  1. h5无法展示m3u8监控视频或者需要很久才能展示出来；—早期旧版本没问题
  2. h5上传11M左右的视频很慢；—早期旧版本没问题

| 信息类别       | 内容             |
|----------------|------------------|
| 产品分类       | uniapp/H5        |
| PC开发环境     | Windows          |
| PC开发环境版本 | windows10        |
| HBuilderX类型  | 正式             |
| HBuilderX版本  | 3.1.12           |
| 浏览器平台     | Chrome           |
| 浏览器版本     | 360或谷歌或火狐或微信公众号 |
| 项目创建方式   | HBuilderX        |

更多关于uni-app中h5无法展示m3u8监控视频，或者需要很久才能展示出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

应用 H5 端播放视频，可以参考 MuiPlayer。它提供了一套完善的视频播放解决方案，处理移动端播放的各种兼容性问题以及对 h5 plus api 的支持。支持 flv 以及 hls 视频协议的播放：
https://muiplayer.gitee.io/guide/

更多关于uni-app中h5无法展示m3u8监控视频，或者需要很久才能展示出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的H5环境中，m3u8视频加载缓慢或无法播放通常与视频流格式、网络环境和浏览器兼容性有关。以下是几个关键排查点：

  1. 视频源问题：m3u8作为HLS流媒体格式，依赖服务器分片传输。检查视频源服务器是否稳定，网络延迟是否过高。可使用VLC等工具直接测试m3u8链接的可用性。

  2. 浏览器兼容性：H5环境下，不同浏览器对HLS的原生支持程度不同。建议：

    • 使用原生支持HLS的浏览器（如Safari）。
    • 在Chrome等浏览器中引入hls.js库进行软解：
    import Hls from 'hls.js';
if (Hls.isSupported()) {
  const video = document.getElementById('myVideo');
  const hls = new Hls();
  hls.loadSource('http://lmt.ilxjy.com:6211/M3ULIVE/314VHLY5.m3u8?mytest');
  hls.attachMedia(video);
}
回到顶部