精确有效观看视频

public/react/src/modules/courses/Video/video-play/index.jsx

@@ -1,5 +1,26 @@
 import React, { useRef, useEffect, useCallback } from 'react'
 
+Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+  get: function () {
+    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2)
+  }
+})
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+function getTotalEffectTime(pos) {
+  pos.sort(compareNumbers)
+  let sum = 0
+  for (let i = 0; i < pos.length - 1; i++) {
+    let v = pos[i + 1] - pos[i]
+    if (v < 21) {
+      sum += v
+    }
+  }
+  return sum
+}
 const regex = /(android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini)/i
 //接口文档 https://www.showdoc.cc/educoder?page_id=4029884447803706
 export default ({ src, videoId, logWatchHistory, courseId = null }) => {
@@ -12,22 +33,21 @@ export default ({ src, videoId, logWatchHistory, courseId = null }) => {
   const device = deviceMatch ? deviceMatch[0] : 'pc'
 
   let totalDuration = 0
-  let totalTimePlayed = 0
   let sumTimePlayed = 0
   let lastUpdatedTime = 0
-  let lastEffectUpdatedTime = 0
   let logId = null
   let initLog = false
   let timeTick = 20 //记录频率 默认20s
   let logCount = 1
   let isLoging = false
   let isSeeking = false
+  let pos = []//播放时间点集
 
   const log = useCallback((callback) => {
     let params = {}
     if (logId) {
       params['log_id'] = logId
-      params['watch_duration'] = totalTimePlayed //当前观看视频时长，拖放进度条，重复的视频片段观看时，不会把重复的时长累积进来，最大时长是视频的总时长
+      params['watch_duration'] = getTotalEffectTime(pos) //当前观看视频时长，拖放进度条，重复的视频片段观看时，不会把重复的时长累积进来，最大时长是视频的总时长
       params['total_duration'] = sumTimePlayed //累计观看视频时长，拖放进度条，重复的视频片段观看时，重复观看时长要累积进来
     } else {
       if (courseId) {
@@ -82,6 +102,7 @@ export default ({ src, videoId, logWatchHistory, courseId = null }) => {
   useEffect(() => {
 
     function onPlay() {
+      pos.push(el.current.currentTime)
       if (!initLog) {
         initLog = true
         log()
@@ -92,13 +113,12 @@ export default ({ src, videoId, logWatchHistory, courseId = null }) => {
       log(() => {
         logId = null
         logCount = 1
-        totalTimePlayed = 0
         lastUpdatedTime = 0
         sumTimePlayed = 0
         initLog = false
         isLoging = false
-        lastEffectUpdatedTime = 0
         isSeeking = false
+        pos = []
       })
     }
 
@@ -106,18 +126,16 @@ export default ({ src, videoId, logWatchHistory, courseId = null }) => {
       if (!isSeeking) {
         let newTime = el.current.currentTime
         let timeDiff = newTime - lastUpdatedTime
-        let effectTimeDiff = newTime - lastEffectUpdatedTime
-        if (effectTimeDiff > 0) {
-          totalTimePlayed += effectTimeDiff
-          lastEffectUpdatedTime = newTime
-        }
-        sumTimePlayed += Math.abs(timeDiff)
-        lastUpdatedTime = newTime
-
-        if (!isLoging) {
-          if (sumTimePlayed - logCount * timeTick >= 0) {
-            logCount++
-            log()
+        //currenttime update before Seeking & Seeked fired
+        if (Math.abs(timeDiff) < 0.5) {
+          sumTimePlayed += Math.abs(timeDiff)
+          lastUpdatedTime = newTime
+          if (!isLoging) {
+            if (sumTimePlayed - logCount * timeTick >= 0) {
+              logCount++
+              pos.push(lastUpdatedTime)
+              log()
+            }
           }
         }
       }
@@ -126,11 +144,13 @@ export default ({ src, videoId, logWatchHistory, courseId = null }) => {
 
     function onSeeking() {
       isSeeking = true
-      lastUpdatedTime = el.current.currentTime
-      lastEffectUpdatedTime = el.current.currentTime
     }
 
     function onSeeked() {
+      if (el.current.playing) {
+        pos.push(el.current.currentTime, lastUpdatedTime)
+      }
+      lastUpdatedTime = el.current.currentTime
       isSeeking = false
     }