<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<video id="myVideo" src="https://nfgb-zb.oss-cn-shenzhen.aliyuncs.com/gz/gz.m3u8"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="uni-list uni-common-mt">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="uni-btn-v">
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: ''
}
},
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods: {
sendDanmu: function() {
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
});
this.danmuValue = '';
},
videoErrorCallback: function(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
getRandomColor: function() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
}
}
</script>
- 发布:2026-03-11 20:46
- 更新:2026-03-11 21:31
- 阅读:28
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 版本 Windows 10 企业版 版本号 22H2 安装日期 2024/3/1 OS 内部版本 19045.6332
HBuilderX类型: 正式
HBuilderX版本号: 4.87
第三方开发者工具版本号: 1.06.2412040
基础库版本号: 3.14.2
项目创建方式: HBuilderX
示例代码:
操作步骤:
正常开始播放ios出现loading圈圈
正常开始播放ios出现loading圈圈
预期结果:
正常开始播放ios出现loading圈圈
正常开始播放ios出现loading圈圈
实际结果:
正常开始播放ios出现loading圈圈
正常开始播放ios出现loading圈圈
bug描述:
video在iOS设备中播放m3u8视频正常播放的情况下出现loading 安卓端没有出现
小程序原生video示例没有出现该问题 uni-app会出现这个问题
欢迎到专业群( uni-ui官方技术交流群 ) 咨询,群中有相关专业的管理员和群友。
这个bug反馈的基本信息具备,但关键信息缺失较多,需要补充后才能有效定位问题。
反馈完整性评价
该反馈存在以下信息缺口:
- 平台类型不明确:从描述"小程序原生video示例没有出现该问题"推断是App端(iOS App),但未明确说明是uni-app(Vue2/Vue3)还是uni-app x,也未提供iOS系统版本号(如iOS 16/17/18)和具体设备型号
- 复现步骤过于简略:仅描述"正常开始播放",缺少网络环境(WiFi/蜂窝网络)、m3u8文件特征(是否加密、分片时长、码率等)、以及loading出现的具体时机(是刚开始播放时、缓冲时还是全程持续)
- 预期与实际结果描述混淆:当前两者描述完全一致,需要明确预期是"播放流畅无loading干扰"还是其他
- 运行环境缺失:未说明是标准基座、自定义基座还是云端打包后的表现
基于知识库的分析
从知识库检索到的信息来看,iOS端video组件确实存在特定的流媒体兼容性问题。在对话记录中,有用户反馈"在ios app中,使用video组件加载flv视频流,概率出现加载不出来的情况",官方人员建议"在ios端改成了m3u8格式"解决。这表明iOS原生播放器对特定格式有严格限制。
但针对您反馈的"m3u8正常播放仍出现loading"现象,知识库中暂无完全匹配的已知问题记录或解决方案。
建议补充的信息
请补充以下内容以便进一步分析:
- 明确的运行平台:uni-app Vue2/Vue3 还是 uni-app x?是iOS App(ipa包)还是微信小程序?
- iOS系统版本及设备型号
- m3u8视频流的详细信息(是否AES-128加密、EXTINF时长、码率自适应配置等)
- 问题video的manifest.json中是否配置了
"allowsInlineMediaPlayback": true等相关参数 - 尝试使用相同的m3u8地址在Safari浏览器中直接播放,观察是否出现相同loading行为
可能的解决方向
若确认是uni-app App端问题,可尝试:
- 检查manifest.json的iOS配置中video相关参数
- 考虑使用插件市场的第三方视频播放器组件作为替代方案,如支持自定义UI的播放器插件
- 如果是特定编码的m3u8问题,可能需要服务端调整HLS分片策略(如减少分片数量、调整码率)