uni-app 使用video组件时视频播放过程中timeupdate事件在真机上未能触发

示例代码：

<video id="myVideo" :src="videoSrc" :controls='true' :initial-time="initial_time" @timeupdate="timeUpdate" ref="myVideo" @error='error'  
enable-progress-gesture='false'>
    <cover-view class='cover'></cover-view>
</video>

操作步骤：

直接播放视频即可

预期结果：

视频播放过程中timeupdate事件在真机上可以正常触发

实际结果：

视频播放过程中timeupdate事件在真机上未能触发

bug描述：

视频播放过程中timeupdate事件在真机上未能触发


| 项目名称       | 值                   |
|----------------|----------------------|
| 产品分类       | uniapp/小程序/微信   |
| PC开发环境操作系统 | Windows              |
| PC开发环境操作系统版本号 | Windows 10           |
| HBuilderX类型  | 正式                 |
| HBuilderX版本号 | 4.23                 |
| 第三方开发者工具版本号 | 1.06.2102020         |
| 基础库版本号   | 3.5.6                |
| 项目创建方式   | HBuilderX            |

更多关于uni-app 使用video组件时视频播放过程中timeupdate事件在真机上未能触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

我这边使用vue3 video demo 未能复现，你上传一下你的demo工程

更多关于uni-app 使用video组件时视频播放过程中timeupdate事件在真机上未能触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 2楼

在uni-app中使用<video>组件时，如果timeupdate事件在真机上未能触发，通常是由于事件绑定或组件属性设置不当导致的。以下是一个详细的代码示例，展示如何在uni-app中正确使用<video>组件并监听timeupdate事件。

首先，确保你的uni-app项目已经正确创建并配置。然后，在页面的.vue文件中，你可以按照以下方式使用<video>组件：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      @timeupdate="handleTimeUpdate"
    ></video>
    <view class="currentTime">当前播放时间: {{ currentTime }} 秒</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0, // 用于存储当前播放时间
    };
  },
  methods: {
    handleTimeUpdate(event) {
      // event.detail.currentTime 获取视频当前播放时间
      this.currentTime = event.detail.currentTime.toFixed(2); // 保留两位小数
      console.log('当前播放时间:', this.currentTime); // 调试输出
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

video {
  width: 300px;
  height: 200px;
  margin-bottom: 20px;
}

.currentTime {
  font-size: 16px;
  color: #333;
}
</style>

在上述代码中，我们做了以下几件事：

在<template>部分，使用<video>组件并设置src属性为视频文件的URL。同时，使用@timeupdate事件监听器绑定handleTimeUpdate方法。
在<script>部分，定义一个currentTime数据属性来存储当前播放时间，并在handleTimeUpdate方法中更新这个属性。event.detail.currentTime提供了视频的当前播放时间。
在<style>部分，添加了一些基本的样式来美化页面布局。

确保你的视频URL是有效的，并且视频文件可以在浏览器中正常播放。此外，由于真机环境可能存在一些差异，确保你的uni-app和HBuilderX（或其他开发工具）已经更新到最新版本，以避免已知的bug或兼容性问题。

如果上述代码在真机上仍然无法触发timeupdate事件，请检查以下几点：

视频文件是否被正确加载。
是否有其他JavaScript错误阻止了事件的正常触发。
真机浏览器的版本和兼容性是否支持timeupdate事件。