vue实现视频观看时长

Vue 实现视频观看时长统计

在 Vue 中实现视频观看时长统计，可以通过监听视频播放事件并结合时间计算来完成。以下是具体实现方法：

监听视频事件

在 Vue 组件中，使用 ref 获取视频元素，并监听 timeupdate、play、pause 等事件：

<template>
  <video ref="videoPlayer" @timeupdate="handleTimeUpdate" @play="handlePlay" @pause="handlePause">
    <source src="video.mp4" type="video/mp4">
  </video>
  <p>已观看时长：{{ watchedTime }} 秒</p>
</template>

<script>
export default {
  data() {
    return {
      watchedTime: 0,
      lastPlayTime: 0,
      isPlaying: false
    }
  },
  methods: {
    handleTimeUpdate() {
      if (this.isPlaying) {
        const currentTime = this.$refs.videoPlayer.currentTime
        this.watchedTime += currentTime - this.lastPlayTime
        this.lastPlayTime = currentTime
      }
    },
    handlePlay() {
      this.isPlaying = true
      this.lastPlayTime = this.$refs.videoPlayer.currentTime
    },
    handlePause() {
      this.isPlaying = false
    }
  }
}
</script>

使用计时器统计时长

另一种方法是使用 setInterval 定时器统计播放时长：

methods: {
  startTimer() {
    this.timer = setInterval(() => {
      if (this.isPlaying) {
        this.watchedTime += 1
      }
    }, 1000)
  },
  handlePlay() {
    this.isPlaying = true
    this.startTimer()
  },
  handlePause() {
    this.isPlaying = false
    clearInterval(this.timer)
  }
},
mounted() {
  this.startTimer()
},
beforeDestroy() {
  clearInterval(this.timer)
}

保存观看进度

如果需要保存用户的观看进度，可以使用 localStorage：

methods: {
  saveProgress() {
    localStorage.setItem('videoProgress', this.watchedTime)
  },
  loadProgress() {
    const savedTime = localStorage.getItem('videoProgress')
    if (savedTime) {
      this.watchedTime = parseInt(savedTime)
      this.$refs.videoPlayer.currentTime = this.watchedTime
    }
  }
},
mounted() {
  this.loadProgress()
},
beforeDestroy() {
  this.saveProgress()
}

格式化显示时间

将秒数格式化为更友好的时间显示：

computed: {
  formattedTime() {
    const hours = Math.floor(this.watchedTime / 3600)
    const minutes = Math.floor((this.watchedTime % 3600) / 60)
    const seconds = Math.floor(this.watchedTime % 60)

    return [
      hours.toString().padStart(2, '0'),
      minutes.toString().padStart(2, '0'),
      seconds.toString().padStart(2, '0')
    ].join(':')
  }
}

完整组件示例

<template>
  <div>
    <video 
      ref="videoPlayer"
      @timeupdate="handleTimeUpdate"
      @play="handlePlay"
      @pause="handlePause"
      controls
    >
      <source src="video.mp4" type="video/mp4">
    </video>
    <p>观看时长: {{ formattedTime }}</p>
    <p>当前进度: {{ progress }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      watchedTime: 0,
      lastPlayTime: 0,
      isPlaying: false,
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const hours = Math.floor(this.watchedTime / 3600)
      const minutes = Math.floor((this.watchedTime % 3600) / 60)
      const seconds = Math.floor(this.watchedTime % 60)
      return `${hours}:${minutes}:${seconds}`
    },
    progress() {
      const duration = this.$refs.videoPlayer?.duration || 1
      return ((this.watchedTime / duration) * 100).toFixed(2)
    }
  },
  methods: {
    handleTimeUpdate() {
      if (this.isPlaying) {
        const currentTime = this.$refs.videoPlayer.currentTime
        this.watchedTime += currentTime - this.lastPlayTime
        this.lastPlayTime = currentTime
      }
    },
    handlePlay() {
      this.isPlaying = true
      this.lastPlayTime = this.$refs.videoPlayer.currentTime
    },
    handlePause() {
      this.isPlaying = false
    },
    saveProgress() {
      localStorage.setItem('videoProgress', this.watchedTime)
    },
    loadProgress() {
      const savedTime = localStorage.getItem('videoProgress')
      if (savedTime) {
        this.watchedTime = parseInt(savedTime)
        this.$refs.videoPlayer.currentTime = this.watchedTime
      }
    }
  },
  mounted() {
    this.loadProgress()
  },
  beforeDestroy() {
    this.saveProgress()
  }
}
</script>

这些方法可以根据实际需求进行组合或调整，实现精确的视频观看时长统计功能。