uni-app video组件播放开始后拖动进度条不触发seek方法
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>
操作步骤
- 播放视频,然后拖动进度条,发现seeking和seeked没有任何触发
预期结果
- 拖动进度条触发seeking 或者seeked 事件
实际结果
- 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 |
不兼容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
),这样用户就可以使用播放、暂停和拖动进度条等功能。同时,我们监听了seek
和timeupdate
事件。seek
事件在用户拖动进度条时触发,而timeupdate
事件在播放时间发生变化时(如自然播放)触发。
如果你发现seek
事件仍然不触发,可能是以下几个原因:
- 视频源问题:确保视频源是有效的,并且视频格式被
video
组件支持。 - 浏览器或平台兼容性问题:不同的平台(如小程序、H5、App等)对
video
组件的支持可能有所不同,确保在目标平台上测试。 - 代码错误:检查是否有其他JavaScript错误或冲突,这可能会影响事件监听。
- uni-app版本:确保你使用的uni-app版本没有已知的关于
video
组件的bug。
如果以上检查都没有问题,但问题仍然存在,你可以考虑在uni-app的社区或GitHub仓库中搜索或报告这个问题,可能有其他开发者遇到了类似的情况并找到了解决方案。