<template>
<view style="flex: 1;">
<video id="video" src="/static/1.mp4" style="width: 750rpx;height: 460rpx;" @timeupdate="onTimeUpdate"></video>
<list style="flex: 1;">
<cell v-for="(item,idx) in items" :key="idx">
<view :ref="'cell'+idx" @click="toItem(idx)">
<text :class="[current==idx?'hi-text-current':'hi-text']">{{item.dxtSentenceContent}}</text>
</view>
<view style="height: 24rpx;"></view>
</cell>
</list>
</view>
</template>
<script>
const dom = uni.requireNativePlugin("dom")
import dataArr from './data.js'
export default {
data() {
return {
items: dataArr,
current: 0,
}
},
onLoad() {
this.vIns = uni.createVideoContext('video', this)
},
methods: {
onTimeUpdate(e) {
// const num = this.toParseTimeIntoNumber(item.startTime)
},
toItem(idx) {
const item = this.items[idx]
const num = this.toParseTimeIntoNumber(item.startTime)
console.log(item.startTime, num, parseInt(num))
// this.vIns.stop()
this.vIns.seek(parseInt(num))
this.current = idx
// this.vIns.play()
},
toParseTimeIntoNumber(time){
if(!time){
return
}
time = time.toString().replace('.', ':').replace(',', ':').replace('\n', '');
let a = time.split(':')
//time = a[0] * 3600 + a[1] * 60 + a[2] * 1 + a[3]*0.01
// time = 0
let num = 0
for(let i = a.length -1 ; i>=0 ; i--){
if(a[i]){
if(i == a.length -1){
let bb = a[i].toString().trim()
if(bb.length == 3){
num += parseFloat(a[i] * 0.001)
}else if(bb.length == 2){
num += parseFloat(a[i] * 0.01)
}else if(bb.length == 1){
num += parseFloat(a[i] * 0.1)
}
}else if(i == a.length -2){
num += parseFloat(a[i])
}else if(i == a.length -3){
num += parseFloat(a[i] * 60)
}else if(i == a.length -4){
num += parseFloat(a[i] * 3600)
}
}
}
return num
}
}
}
</script>
<style lang="scss">
.hi {
&-text {
font-size: 32rpx;
line-height: 45rpx;
color: #333333;
&-current {
font-size: 32rpx;
line-height: 45rpx;
color: #008b8b;
}
}
}
</style>
- 发布:2023-01-06 22:48
- 更新:2023-01-06 22:49
- 阅读:371
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 13.0.1 (22A400)
HBuilderX类型: 正式
HBuilderX版本号: 3.6.15
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: P40
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
可以把上面的items之间换成0 1 2 3 4 ..... 这种秒数,然后去点每一个item,去看实际视频里面他seek到了那一个时间点。
可以把上面的items之间换成0 1 2 3 4 ..... 这种秒数,然后去点每一个item,去看实际视频里面他seek到了那一个时间点。
预期结果:
希望正常seek。
希望正常seek。
实际结果:
现在seek时间对不上
现在seek时间对不上
bug描述:
在做一个视频里面内容定位的小功能,用户可以点击内容索引,然后定位到视频具体时间点,但是发现seek的时间总是有问题。我seek到6s,他从4s开始放。总是对不上。
1 个回复
语文数学天才 (作者) - 做最顺手的nvue组件库与工具集
我上面的seek中的parseInt只是为了测试是不是因为有小数点的原因,发现,不管是整数还是小树,都有这个问题