fix: Fix a hls bug when switching quality (zhihu#59)

* fix: add plugin config. fix hls bug
vaeer · Apr 10, 2019 · 4a0e079 · 4a0e079
1 parent 0b5e874
commit 4a0e079
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 21 deletions.
diff --git a/packages/griffith-hls/src/Video.js b/packages/griffith-hls/src/Video.js
@@ -6,10 +6,7 @@ export default class Video extends Component {
   hasLoadStarted = false
 
   componentDidMount() {
-    const {autoStartLoad = false} = this.props
-    this.hls = new Hls({
-      autoStartLoad,
-    })
+    this.hls = new Hls({autoStartLoad: false})
     this.hls.attachMedia(this.video)
     const {sources} = this.props
     const master = getMasterM3U8Blob(sources)
@@ -38,11 +35,12 @@ export default class Video extends Component {
 
   componentWillUnmount() {
     this.hls.destroy()
+    URL.revokeObjectURL(this.src)
   }
 
   render() {
-    // eslint-disable-next-line
-    const {onRef, currentQuality, src, paused, ...props} = this.props
+    // eslint-disable-next-line no-unused-vars
+    const {onRef, currentQuality, src, sources, paused, ...props} = this.props
     return (
       <video
         ref={el => {

diff --git a/packages/griffith-hls/src/index.js b/packages/griffith-hls/src/index.js
@@ -1 +1,7 @@
-export {default} from './Video'
+import VideoComponent from './Video'
+
+export default {
+  pluginName: 'griffith-mp4',
+  VideoComponent,
+  willHandleSrcChange: true,
+}
diff --git a/packages/griffith-mp4/src/index.js b/packages/griffith-mp4/src/index.js
@@ -1,3 +1,6 @@
-/* eslint-disable import/default */
-import Player from './player'
-export default Player
+import VideoComponent from './player'
+
+export default {
+  pluginName: 'griffith-mp4',
+  VideoComponent,
+}
diff --git a/packages/griffith/src/components/Video/NormalVideo.js b/packages/griffith/src/components/Video/NormalVideo.js
@@ -1,6 +1,11 @@
 import React from 'react'
 
 // eslint-disable-next-line
-export default ({onRef, paused, currentQuality, sources, ...props}) => (
+const NormalVideo = ({onRef, paused, currentQuality, sources, ...props}) => (
   <video {...props} ref={onRef} />
 )
+
+export default {
+  pluginName: 'native',
+  VideoComponent: NormalVideo,
+}
diff --git a/packages/griffith/src/components/Video/Video.js b/packages/griffith/src/components/Video/Video.js
@@ -63,20 +63,25 @@ class Video extends Component {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    const {src, paused, volume} = this.props
+    const {src, paused, volume, format, useMSE} = this.props
 
     /**
      * 切换清晰度，如果是非 mse 视频（src 是 blob 类型）
      * data 变化的时候会 remount，所以 componentDidUpdate 中 src 变化一定是清晰度变了
      */
     if (prevProps.src && src !== prevProps.src) {
-      this.safeExecute(() => {
-        this.isMetadataLoaded = false
-        this.seek(snapshot.currentTime)
-        if (!snapshot.paused) {
-          this.play()
-        }
-      })
+      const {willHandleSrcChange} = selectVideo(format, useMSE)
+
+      // TODO 这一块逻辑需要 Video 自己处理
+      if (!willHandleSrcChange) {
+        this.safeExecute(() => {
+          this.isMetadataLoaded = false
+          this.seek(snapshot.currentTime)
+          if (!snapshot.paused) {
+            this.play()
+          }
+        })
+      }
     }
 
     if (paused !== prevProps.paused && paused !== this.root.paused) {
@@ -290,7 +295,7 @@ class Video extends Component {
       currentQuality,
     } = this.props
 
-    const Video = selectVideo(format, useMSE)
+    const {VideoComponent} = selectVideo(format, useMSE)
 
     return (
       <VideoWithMessage
@@ -323,7 +328,7 @@ class Video extends Component {
         paused={paused}
         sources={sources}
         currentQuality={currentQuality}
-        Video={Video}
+        Video={VideoComponent}
       />
     )
   }