uni-app uniappX video标签timeupdate属性返回值为空，可复现

uni-app uniappX video标签timeupdate属性返回值为空，可复现

开发环境 版本号 项目创建方式
Mac 11.2.3 HBuilderX
Android 10

示例代码：

timeupdate(event: Event, index: number){  
    console.log(event['detail']);  
}

操作步骤：

timeupdate(event: Event, index: number){  
    console.log(event);//正常，但是值是空的，啥也没有  
    console.log(event['detail']);//报错  
}

预期结果：

  • 有值

实际结果：

  • event[‘detail’]报错，提示错误，无法编译通过
  • event正常，但是值是空的，啥也没有

更多关于uni-app uniappX video标签timeupdate属性返回值为空，可复现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

HBuilderX 3.98.2023112011-alpha 已修复。

更多关于uni-app uniappX video标签timeupdate属性返回值为空，可复现的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX 4.24还是有这个问题，返回的是： //‍[⁠uts.sdk.modules.DCloudUniVideo.UniVideoTimeUpdateEventImpl⁠]‍ {}

在 uni-app 或 uni-appX 中，如果你使用 <video> 标签时发现 timeupdate 事件的返回值为空，可能是由于以下几个原因导致的。以下是一些排查和解决方法：

1. 确认事件绑定是否正确

确保你正确绑定了 timeupdate 事件。例如：

<template>
  <video
    src="your-video-url.mp4"
    @timeupdate="onTimeUpdate"
  ></video>
</template>

<script>
export default {
  methods: {
    onTimeUpdate(event) {
      console.log('Current Time:', event.detail.currentTime);
    }
  }
}
</script>

2. 确认视频资源是否正常

确保视频资源能够正常播放。如果视频资源有问题，可能会导致事件无法正常触发或返回值为空。

3. 检查平台差异

uni-app 支持多平台（如微信小程序、H5、App等），不同平台对 <video> 标签的支持可能存在差异。建议检查是否在特定平台上出现问题。

4. 使用 currentTime 属性

如果 timeupdate 事件返回值为空，你可以尝试直接访问 video 元素的 currentTime 属性来获取当前播放时间：

<template>
  <video
    ref="videoPlayer"
    src="your-video-url.mp4"
    @timeupdate="onTimeUpdate"
  ></video>
</template>

<script>
export default {
  methods: {
    onTimeUpdate() {
      const videoElement = this.$refs.videoPlayer;
      console.log('Current Time:', videoElement.currentTime);
    }
  }
}
</script>

5. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app，因为旧版本可能存在一些已知的 bug 或问题。你可以通过以下命令更新 uni-app：

npm update @dcloudio/uni-app

6. 检查控制台错误

打开开发者工具，检查控制台是否有其他错误信息。这些错误信息可能会帮助你更好地定位问题。

7. 使用 uni.createVideoContext

如果你在微信小程序中遇到问题，可以尝试使用 uni.createVideoContext 来获取视频上下文，并通过它来监听 timeupdate 事件：

const videoContext = uni.createVideoContext('videoPlayer');
videoContext.onTimeUpdate((res) => {
  console.log('Current Time:', res.currentTime);
});
回到顶部