uni-app video组件在Android真机环境的微信小程序中 使用直播地址时 timeupdate事件无法触发
uni-app video组件在Android真机环境的微信小程序中 使用直播地址时 timeupdate事件无法触发
操作步骤：
- 微信小程序，真机调试
预期结果：
- timeupdate 被触发
实际结果：
- timeupdate 没有被触发
bug描述：
- Android真机环境，微信小程序，vue3，
- video组件，src为直播链接（不是视频文件）时，timeupdate 没有被触发
| 项目 | 信息 |
| --- | --- |
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | window10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.29 |
| 第三方开发者工具版本号 | 1.06.2409140 |
| 基础库版本号 | 3.6.6[1289] |
| 项目创建方式 | HBuilderX |
我这边测试了一下，IOS真机模拟也是同样的情况。 播放视频文件可以正常执行timeupdate，播放直播源就不能执行timeupdate。我怀疑是因为微信8.0.53 ，小程序基础版本3.6.6 的video组件，在加载直播流后，组件中的进度条不能显示，造成timeupdate不执行。
在uni-app中，使用video组件播放直播流时，如果在Android真机环境的微信小程序中遇到timeupdate事件无法触发的问题，这通常与视频流的类型、微信小程序的限制以及uni-app框架的适配有关。以下是一些可能的解决方案和代码示例，帮助你在uni-app中更好地处理这个问题。
1. 确保直播流格式正确
首先，确保你使用的直播流地址格式正确，并且该流能够在其他播放器中正常播放。对于HLS（HTTP Live Streaming）流，微信小程序通常有较好的支持。
2. 使用controls属性
在uni-app的video组件中，尝试添加controls属性，这可能会触发一些内部机制，使得timeupdate事件得以正常触发。
<template>
<view>
<video
id="liveVideo"
src="https://your-live-stream-url.com/stream"
controls
@timeupdate="onTimeUpdate"
></video>
</view>
</template>
<script>
export default {
methods: {
onTimeUpdate(event) {
console.log('Current time:', event.detail.currentTime);
}
}
}
</script>
3. 轮询当前播放时间
如果timeupdate事件仍然无法触发，你可以考虑使用定时器轮询video组件的当前播放时间。这不是最佳实践，但在某些情况下可以作为临时解决方案。
<template>
<view>
<video
ref="liveVideo"
src="https://your-live-stream-url.com/stream"
autoplay
></video>
</view>
</template>
<script>
export default {
mounted() {
this.pollCurrentTime();
},
methods: {
pollCurrentTime() {
const video = this.$refs.liveVideo;
setInterval(() => {
if (video && video.currentTime) {
console.log('Current time (polled):', video.currentTime);
}
}, 1000); // 每秒轮询一次
}
}
}
</script>
4. 检查微信小程序的限制
请注意，微信小程序对于video组件的使用有一些限制，特别是直播流。确保你的微信小程序版本支持直播流播放，并且没有遇到微信方面的已知问题。
5. 更新uni-app框架
确保你使用的uni-app框架是最新版本，因为开发者社区和官方可能会在新版本中修复此类问题。
通过上述方法，你可以尝试解决uni-app中video组件在Android真机环境的微信小程序中使用直播地址时timeupdate事件无法触发的问题。如果问题依然存在，建议查阅uni-app和微信小程序的官方文档或社区论坛，以获取更多帮助。
