uni-app video组件播放开始后拖动进度条不触发seek方法

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app video组件播放开始后拖动进度条不触发seek方法

产品分类

uniapp/App

示例代码

<video  
  ref="weiyin_video"  
  id="weiyin_video"  
  :fullscreen="true"  
  :muted="true"  
  :header="play_mode.video_header"  
  title="title"  
  :src="play_data[1]"  
  autoplay  
  codec="hardware"  
  :show-mute-btn="true"  
  :show-center-play-btn="true"  
  :controls="controls"  
  :play-strategy="0"  
  :enable-play-gesture="true"  
  :enable-progress-gesture="true"  
  :vslide-gesture-in-fullscreen="true"  
  @pause="pause_status"  
  @timeupdate="timeupdate"  
  @ended="ended_play_last"  
  @error="videoErrorCallback"  
  @loadedmetadata="loadedmetadata"  
  @loadeddata="loadedmetadata"  
  @waiting="waiting"  
  @seeking="seeking"  
  @seeked="seeked"  
>  
</video>

操作步骤

  1. 播放视频,然后拖动进度条,发现seeking和seeked没有任何触发

预期结果

  1. 拖动进度条触发seeking 或者seeked 事件

实际结果

  1. seeking和seeked没有任何触发

bug描述

video组件在开始播放之后,拖动进度条,不触发seek 或者 seeking方法,拖动过程中或者拖动结束也不会触发 timeupdate;
安卓平板或者一加8手机上都是一样的结果

开发环境、版本号、项目创建方式

项目 信息
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Apple M2;MacOS 14.5 (23F79)
HBuilderX类型 正式
HBuilderX版本号 4.36
手机系统 Android
手机系统版本号 Android 13
手机厂商 OPPO
手机机型 OnePlus 8/安卓平板
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

5 回复

不兼容app端 只有京东小程序才有这个事件


那怎么样才能知道拖动结束后最新的 视频时间呢?

不是有这个timeupdate事件吗

回复 爱豆豆: bug描述里,就是不触发timeupdate,我用手机或是平板都是这样子就是没有触发到,不然就不会提bug过来了

在uni-app中,video组件是用于播放视频的,其中seek事件用于在用户拖动进度条时触发。然而,如果你遇到在播放开始后拖动进度条不触发seek方法的问题,可能是由于某些事件监听没有正确设置或组件属性配置有误。

首先,确保你的video组件配置正确,并且你已经在合适的地方监听了seek事件。下面是一个基本的示例,展示如何设置video组件并监听seek事件:

<template>
  <view>
    <video
      id="myVideo"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      @seek="onSeek"
      @timeupdate="onTimeUpdate"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onSeek(e) {
      console.log('Seek event triggered', e.detail.currentTime);
      // 你可以在这里添加你的逻辑,比如更新当前播放时间显示
    },
    onTimeUpdate(e) {
      // 这个事件用于更新当前播放时间(非拖动进度条时)
      console.log('Time update event triggered', e.detail.currentTime);
    }
  }
}
</script>

<style>
/* 你可以在这里添加你的样式 */
</style>

在这个示例中,video组件被赋予了一个视频源,并且启用了控件(controls),这样用户就可以使用播放、暂停和拖动进度条等功能。同时,我们监听了seektimeupdate事件。seek事件在用户拖动进度条时触发,而timeupdate事件在播放时间发生变化时(如自然播放)触发。

如果你发现seek事件仍然不触发,可能是以下几个原因:

  1. 视频源问题:确保视频源是有效的,并且视频格式被video组件支持。
  2. 浏览器或平台兼容性问题:不同的平台(如小程序、H5、App等)对video组件的支持可能有所不同,确保在目标平台上测试。
  3. 代码错误:检查是否有其他JavaScript错误或冲突,这可能会影响事件监听。
  4. uni-app版本:确保你使用的uni-app版本没有已知的关于video组件的bug。

如果以上检查都没有问题,但问题仍然存在,你可以考虑在uni-app的社区或GitHub仓库中搜索或报告这个问题,可能有其他开发者遇到了类似的情况并找到了解决方案。

回到顶部