<template>
<view class="">
<video class="video" id="video" ref="video" :src="src" :muted="true" :initial-time="time" :controls="true" :autoplay="true" @timeupdate="handleUpdate"
></video>
<button @click="handleSeek(3)">快进3</button>
<button @click="handleSeek(5)">快进5</button>
<button @click="handleSeek(10)">快进10</button>
<button @click="handleSeek(30)">快进30</button>
<button @click="handleSeek(60)">快进60</button>
<button @click="handleSeek(120)">快进120</button>
<button @click="handleSeek(240)">快进240</button>
</view>
</template>
<script>
export default {
data() {
return {
src: "/static/images/test/test.mp4",
videoContext: null,
time: 0,
currentTime: 0
}
},
methods: {
handleSeek(val) {
const time = Math.round(this.currentTime + val);
this.currentTime = time;
this.videoContext.seek(time);
},
handleUpdate(e) {
// console.log(e.detail.currentTime);
this.currentTime = e.detail.currentTime;
}
},
mounted() {
this.videoContext = uni.createVideoContext('video', this);
}
}
</script>
<style>
.video {
display: block;
width: 100%;
height: 422rpx;
}
</style>
b***@163.com
- 发布：2023-09-27 10:27
- 更新：2023-09-27 10:27
- 阅读：355
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window11 22H2
HBuilderX类型： 正式
HBuilderX版本号： 3.8.12
手机系统： Android
手机系统版本号： Android 11
手机厂商： 小米
手机机型： Mi9 Pro 5G
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
在 App 编译环境中，点击执行，少于10秒时无法跳转，9秒时偶发跳转成功；浮点型的秒数则seek失效；10秒时有时会回退3s。
在 App 编译环境中，点击执行，少于10秒时无法跳转，9秒时偶发跳转成功；浮点型的秒数则seek失效；10秒时有时会回退3s。
预期结果：
希望seek跳转的时间更为精确。能够支持快进5秒这类的操作。
希望seek跳转的时间更为精确。能够支持快进5秒这类的操作。
实际结果：
少于10秒时无法跳转，9秒时偶发跳转成功；浮点型的秒数则seek失效；10秒时有时会回退3s。
少于10秒时无法跳转，9秒时偶发跳转成功；浮点型的秒数则seek失效；10秒时有时会回退3s。
bug描述：
video 组件在vue2编译环境下，App 上无法seek的秒数只能是整数，无法是浮点型，而且seek增加的秒数少于10秒时不起作用。
0 个回复