uni-app h5播放m3u8视频监控异常 不能播放 已经影响了项目上线

uni-app h5播放m3u8视频监控异常 不能播放 已经影响了项目上线

产品分类

  • uniapp/H5

PC开发环境操作系统

  • Windows

PC开发环境操作系统版本号

  • windows10

HBuilderX类型

  • 正式

HBuilderX版本号

  • 3.1.12

浏览器平台

  • Chrome

浏览器版本

  • 360或谷歌或火狐浏览器还有微信公众号

项目创建方式

  • HBuilderX

示例代码

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

操作步骤

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

预期结果

  • 1、正常展示播放监控

实际结果

  • 监控无法展示播放

更多关于uni-app h5播放m3u8视频监控异常 不能播放 已经影响了项目上线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app h5播放m3u8视频监控异常 不能播放 已经影响了项目上线的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app H5环境中播放m3u8视频流确实存在兼容性问题。从你的代码和描述来看，问题主要源于浏览器对m3u8格式的原生支持限制。

核心问题是：大多数移动端浏览器和PC浏览器默认不支持直接播放m3u8流媒体格式。虽然Chrome等浏览器在桌面端可能支持，但在移动端H5环境中支持度较差。

解决方案建议：

  1. 使用hls.js库：
// 安装hls.js后
import Hls from 'hls.js'

mounted() {
    if(Hls.isSupported()) {
        const video = this.$refs.myVideo
        const hls = new Hls()
        hls.loadSource('http://lmt.ilxjy.com:6211/M3ULIVE/314VHLY5.m3u8?mytest')
        hls.attachMedia(video)
    }
}
回到顶部