视频安全问题

package-lock.json

@@ -23052,6 +23052,11 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "vconsole": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.3.4.tgz",
+      "integrity": "sha512-9yihsic96NPoMLQx/lCQwH9d89H0bbMW3LZPzo/t4yGQcS1X+vTCe9OHm1XSH7WNxzGDmcSwBiKLsFGwvJpQBg=="
+    },
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",

package.json

@@ -106,6 +106,7 @@
     "ts-pnp": "1.1.6",
     "typescript": "^3.7.5",
     "url-loader": "2.3.0",
+    "vconsole": "^3.3.4",
     "video.js": "^7.8.4",
     "web-launch-app": "^2.2.4",
     "webpack": "4.42.0",

src/components/video/index.js

@@ -16,6 +16,7 @@ import jsCookie from 'js-cookie'
 import Single from "src/components/detail/single";
 import SingleSuccess from "../detail/single/singleSuccess";
 import './CustomPlayButton'
+import VConsole from 'vconsole'
 
 let alert = Modal.alert
 
@@ -111,6 +112,7 @@ class Video extends Component {
 
 
   componentDidMount() {
+    new VConsole()
     if (window.location.protocol === 'https:') {
       window.location.replace('http' + window.location.href.slice(5))
       return
@@ -358,11 +360,9 @@ class Video extends Component {
     })
     this.ws.addEventListener('message', e => {
       const data = JSON.parse(e.data);
-      data.code == 4040 && (this.reconnect = false);
-      if (data.code === 0) {
-        if (data.data && data.data.position) {
-          this.player.currentTime(data.data.position);
-        }
+      data.code === 4040 && (this.reconnect = false);
+      if (data.code === 0 && data.data && data.data.position) {
+        this.player.currentTime(data.data.position);
       }
     })
   }
@@ -486,10 +486,14 @@ class Video extends Component {
     })
     this.player.addChild('CustomPlayButtonCover')
     this.player.on('play', () => {
+      console.log('play')
       let videoTime = window.sessionStorage.getItem('videoTimeBeforeReload')
       if (videoTime) {
-        this.player.currentTime(videoTime)
-        window.sessionStorage.removeItem('videoTimeBeforeReload')
+        setTimeout(() => {
+          // window.alert(videoTime)
+          this.player.currentTime(Number(videoTime))
+        }, 2000)
+        // window.sessionStorage.removeItem('videoTimeBeforeReload')
       }
 
       const {videoList, activeIndex, vCourseId, course = {}} = this.state
@@ -513,6 +517,11 @@ class Video extends Component {
         this.setupTimer();
       }
     })
+    this.player.on('ready', () => {
+      console.log('ready')
+
+
+    })
     this.player.on('ratechange', () => {
       this.currentPlaybackRate = this.player.playbackRate()
       this.sendWatchTime(this.watchSec, this.previousPlaybackRate)
@@ -535,15 +544,11 @@ class Video extends Component {
         })
       }
     })
-
+    this.player.on('error', () => {
+      this.handleVideoAuthError(0)
+    })
     this.player.on('waiting', () => {
-      clearTimeout(this.currentVideoTimer)
-      this.currentVideoTimer = setTimeout(() => {
-        if (this.currentVideoExpireTime < new Date().getTime()) {
-          window.sessionStorage.setItem('videoTimeBeforeReload', this.player.currentTime())
-          this.getVideoSrc()
-        }
-      }, 3000)
+      this.handleVideoAuthError(3000)
     })
   }
 
@@ -567,6 +572,17 @@ class Video extends Component {
     this.recordSocket = null
   }
 
+  //处理视频播放权限问题
+  handleVideoAuthError = (interval) => {
+    clearTimeout(this.currentVideoTimer)
+    this.currentVideoTimer = setTimeout(() => {
+      if (this.currentVideoExpireTime < new Date().getTime()) {
+        window.sessionStorage.setItem('videoTimeBeforeReload', this.player.currentTime())
+        this.getVideoSrc()
+      }
+    }, interval)
+  }
+
   //请求签名视频地址
   getVideoSrc = () => {
     const {videoList, activeIndex} = this.state
@@ -702,10 +718,8 @@ class Video extends Component {
     this.player.ready(() => {
       this.player.play()
     })
-
   }
 
-
   getDatumCatalog() {
     http.get(`${API.home}/m/course/data/${this.courseID}`)
       .then(res => {