video组件bindtimeupdate来统计怎么理统计用户观看视频时长?
发布于 4 年前 作者 jkang 12200 次浏览 来自 问答

video组件bindtimeupdate如果快进的话时间会不准确。用video组件怎么来监听用户观看视频的时长?

2 回复

关于小程序统计视频观看时间可以参考一下解决方案,推荐自定义Interval

bindtimeupdate是不能精确统计的喵!

<style lang="less">

video{
width: 100%;
}

.yi-ma-hong{
color: red;
}

</style>
<template>
<view class="container">

   <video src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls show-mute-btn  enable-play-gesture title="test-video"
          bindtimeupdate="videoTimeUpdateFunction" bindplay="videoBindPlay" bindpause="videoBindPause"></video>

   <view>bindtimeupdate统计已观看时长,totalTime={{totalTime}}</view>
<view>setInterval统计已观看时长,totalTime2={{totalTime2}}</view>
<view class="yi-ma-hong">注:</view>
<view class="yi-ma-hong">决计不要用bindtimeupdate来统计已观看时长,你可以试一下不断暂停、播放,神特喵的totalTime误差到外婆家了,totalTime2误差可以忽略。</view>

</view>
</template>

<script>
import wepy from 'wepy'

 export default class tVideo extends wepy.page {
config = {
navigationBarTitleText: '小程序视频测试'
   }
data = {
totalTime: 0, // 观看总时间,ms
     totalTime2: 0, // 观看总时间,ms
     interval: {},
intervalDur: 100
   }

methods = {
videoTimeUpdateFunction(e) {
// 播放进度变化时触发,e.detail = {currentTime, duration} 。触发频率 250ms 一次
       console.log(e.detail)
this.totalTime += 250
     },
videoBindPlay() {
this.interval = setInterval(() => {
this.totalTime2 += this.intervalDur
       }, this.intervalDur)
},
videoBindPause() {
clearInterval(this.interval)
}
}

onUnload() {
clearInterval(this.interval)
}
}
</script>

你解决了吗 这个时间不准啊

回到顶部