update support native play with safari which version large than 13

numberwolf · Aug 24, 2022 · 3761f44 · 3761f44
1 parent 1c7ee55
commit 3761f44
Show file tree

Hide file tree

Showing 45 changed files with 65,233 additions and 211 deletions.
diff --git a/README_EN.MD b/README_EN.MD
@@ -998,6 +998,10 @@ ffmpeg -ss 20 -t 10 -i ./res/xinxiaomen.mp4 \
 
 | Update | Content |
 | ---- | ---- |
+| Time | 2022/08/24 |
+| - | 0.Feature: Safari with native player(version>13) |
+| Time | 2022/08/23 |
+| - | 0.Fixed: Buffer Progress with AVC |
 | Time | 2022/08/13 |
 | - | 0.Support: Resize |
 | Time | 2022/07/27 |

diff --git a/dist-multi-thread/h265webjs-v20220813.js → dist-multi-thread/h265webjs-v20220824.js b/dist-multi-thread/h265webjs-v20220813.js → dist-multi-thread/h265webjs-v20220824.js
diff --git a/dist-multi-thread/index.js b/dist-multi-thread/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220813');
+require('./h265webjs-v20220824');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/...le_vue/public/dist/h265webjs-v20220813.js → dist/h265webjs-v20220824.js b/...le_vue/public/dist/h265webjs-v20220813.js → dist/h265webjs-v20220824.js
diff --git a/dist/index.js b/dist/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220813');
+require('./h265webjs-v20220824');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/.../dist-multi-thread/h265webjs-v20220813.js → .../dist-multi-thread/h265webjs-v20220824.js b/.../dist-multi-thread/h265webjs-v20220813.js → .../dist-multi-thread/h265webjs-v20220824.js
diff --git a/example_normal/dist-multi-thread/index.js b/example_normal/dist-multi-thread/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220813');
+require('./h265webjs-v20220824');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/dist/h265webjs-v20220813.js → example_normal/dist/h265webjs-v20220824.js b/dist/h265webjs-v20220813.js → example_normal/dist/h265webjs-v20220824.js
diff --git a/example_normal/dist/index.d.ts b/example_normal/dist/index.d.ts
@@ -1,4 +1,4 @@
-export interface ExtraConfig {
+export interface Web265JsExtraConfig {
   moovStartFlag?: boolean
   rawFps?: number
   autoCrop?: boolean
@@ -29,7 +29,7 @@ export interface Web265JsConfig {
    * player token value
    */
   token: string
-  extInfo?: ExtraConfig
+  extInfo?: Web265JsExtraConfig
 }
 
 export interface Web265JsMediaInfo {
@@ -76,15 +76,19 @@ interface New265WebJs {
   playNextFrame(): void
   snapshot(): void
   release(): void
+  setPlaybackRate(rate: number): void
+  getPlaybackRate(): number
 }
 
 declare type new265webJsFn = (
   url: string,
   config: Web265JsConfig
 ) => New265WebJs
 
-interface Window {
-  new265webjs: new265webJsFn
+declare global {
+  interface Window {
+    new265webjs: new265webJsFn
+  }
 }
 
 export default class H265webjsModule {

diff --git a/example_normal/dist/index.js b/example_normal/dist/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220813');
+require('./h265webjs-v20220824');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/example_normal/index.html b/example_normal/index.html
@@ -37,7 +37,7 @@
     <link rel="stylesheet" type="text/css" href='player-view/css/button.css'>
     <link rel="stylesheet" type="text/css" href='player-view/css/progress.css'>
     <script src="dist/missile.js"></script>
-    <script src="dist/h265webjs-v20220813.js"></script>
+    <script src="dist/h265webjs-v20220824.js"></script>
     <script src="index.js"></script>
 
 </head>

diff --git a/example_normal/dist/h265webjs-v20220813.js → ...le_vue/public/dist/h265webjs-v20220824.js b/example_normal/dist/h265webjs-v20220813.js → ...le_vue/public/dist/h265webjs-v20220824.js
diff --git a/example_vue/public/dist/index.js b/example_vue/public/dist/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220813');
+require('./h265webjs-v20220824');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/index-debug.html b/index-debug.html
@@ -33,10 +33,10 @@
     <meta charset="utf-8" name="github" content="https://github.com/numberwolf/h265web.js">
 
     <script src="dist/missile.js"></script> <!-- IMPORTANT -->
-    <script src="dist/h265webjs-v20220813.js"></script> <!-- IMPORTANT -->
+    <script src="dist/h265webjs-v20220824.js"></script> <!-- IMPORTANT -->
 
     <!--<script src="dist-multi-thread/missile-multi-thread.js"></script>
-    <script src="dist-multi-thread/h265webjs-v20220813.js"></script>-->
+    <script src="dist-multi-thread/h265webjs-v20220824.js"></script>-->
 
     <style>
     </style>

diff --git a/src/src/h265webjs.js b/src/src/h265webjs.js
@@ -1228,13 +1228,26 @@ class H265webjsModule {
             const browser_info = AVCOMMON.BrowserJudge();
             const browser_type = browser_info[0];
             const browser_version = browser_info[1];
+            console.log("BrowserJudge:", browser_type, browser_version);
             if (browser_type === 'Chrome' && browser_version < 85) {
                 return false;
             }
 
             if (browser_type.indexOf("360") >= 0) {
                 return false;
             }
+
+            if(
+                (
+                    /Safari/.test(navigator.userAgent) 
+                    && !/Chrome/.test(navigator.userAgent)
+                ) && 
+                browser_version > 13
+            ) {
+                console.log("BrowserJudge:", 
+                    browser_version < 13, browser_version > 10);
+                return false;
+            }
         }
 
         return true;
@@ -1490,6 +1503,10 @@ class H265webjsModule {
         this.player.onPlayState = (status) => {
             _this.onPlayState && _this.onPlayState(status);
         }; // onPlayState
+
+        this.player.onCacheProcess = (cPts) => {
+            _this.onCacheProcess && _this.onCacheProcess(cPts);
+        };
     } // _makeNativePlayer
 
     _initMp4BoxObject() {
@@ -2562,6 +2579,9 @@ class H265webjsModule {
         this.player.onPlayState = (status) => {
             _this.onPlayState && _this.onPlayState(status);
         }; // onPlayState
+        this.player.onCacheProcess = (cPts) => {
+            _this.onCacheProcess && _this.onCacheProcess(cPts);
+        };
         this.player.makeIt(this.videoURL);
 
     } // _videoJsPlayer
@@ -2617,6 +2637,10 @@ class H265webjsModule {
             _this.onPlayState && _this.onPlayState(status);
         }; // onPlayState
 
+        this.player.onCacheProcess = (cPts) => {
+            _this.onCacheProcess && _this.onCacheProcess(cPts);
+        };
+
         // this.player.onSeekFinish = () => {
         //     _this.onSeekFinish && _this.onSeekFinish();
         // }; // onSeekFinish

diff --git a/src/src/index.js b/src/src/index.js
@@ -19,7 +19,7 @@
  * Github: https://github.com/numberwolf/h265web.js
  * 
  **********************************************************/
-require('./h265webjs-v20220813');
+require('./h265webjs-v20220824');
 export default class h265webjs {
 	static createPlayer(videoURL, config) {
 		return window.new265webjs(videoURL, config);

diff --git a/src/src/native/mp4-player.js b/src/src/native/mp4-player.js
@@ -42,10 +42,13 @@ class Mp4PlayerModule {
         this.duration = -1;
         // this.fps = -1;
 
+        this.bufferInterval = null;
+
         this.onLoadFinish = null;
         this.onPlayingTime = null;
         this.onPlayingFinish = null;
         this.onPlayState = null;
+        this.onCacheProcess = null;
 
         // this.onPlayUpdatePTSInterval = null;
 	}
@@ -93,6 +96,22 @@ class Mp4PlayerModule {
 			console.log("mp4-player loadedmetadata", e);
 			_this.duration = _this.videoTag.duration;
 			_this.onLoadFinish && _this.onLoadFinish();
+
+			if (_this.bufferInterval !== null) {
+	            window.clearInterval(_this.bufferInterval);
+	            _this.bufferInterval = null;
+	        }
+
+			_this.bufferInterval = window.setInterval(function() {
+				const bufProgress = _this.videoTag.buffered.end(0);
+				console.log("bufProgress", bufProgress);
+				if (bufProgress >= _this.duration - 0.04) {
+					_this.onCacheProcess && _this.onCacheProcess(_this.duration);
+					window.clearInterval(_this.bufferInterval);
+					return;
+				}
+				_this.onCacheProcess && _this.onCacheProcess(bufProgress);
+			}, 200);
 		};
 
         this.videoTag.src = url;
@@ -157,6 +176,11 @@ class Mp4PlayerModule {
         this.onPlayingFinish = null;
         this.onPlayState = null;
 
+        if (this.bufferInterval !== null) {
+            window.clearInterval(this.bufferInterval);
+            this.bufferInterval = null;
+        }
+
         window.onclick = document.body.onclick = null;
 	}
 

diff --git a/src/src/native/nv-flvjs-core.js b/src/src/native/nv-flvjs-core.js
@@ -67,6 +67,8 @@ class NvFlvjsCoreModule {
         this.checkStartIntervalCount = 0;
         this.checkStartInterval = null;
         this.checkPicBlockInterval = null;
+
+        this.bufferInterval = null;
         /*
          * Event @todo
          */
@@ -76,6 +78,7 @@ class NvFlvjsCoreModule {
         this.onPlayingFinish    = null;
         // this.onSeekFinish        = null;
         this.onReadyShowDone    = null;
+        this.onCacheProcess     = null;
     } // constructor
 
     _reBuildFlvjs(url) {
@@ -242,6 +245,7 @@ class NvFlvjsCoreModule {
                     alert("1 flvduration" + _this.duration);
                     _this.onLoadFinish && _this.onLoadFinish();
                     _this.onReadyShowDone && _this.onReadyShowDone();
+                    _this._loopBufferState();
                     console.log("onReadyShowDone video isPlay", _this.isPlayingState());
 
                     _this.videoTag.ontimeupdate = () => {
@@ -277,6 +281,7 @@ class NvFlvjsCoreModule {
                     alert("1 flvduration" + _this.duration);
                     _this.onLoadFinish && _this.onLoadFinish();
                     _this.onReadyShowDone && _this.onReadyShowDone();
+                    _this._loopBufferState();
                     console.log("onReadyShowDone video isPlay", _this.isPlayingState());
 
                     _this.videoTag.ontimeupdate = () => {
@@ -311,6 +316,7 @@ class NvFlvjsCoreModule {
                     alert("2 flvduration" + _this.duration);
                     _this.onLoadFinish && _this.onLoadFinish();
                     _this.onReadyShowDone && _this.onReadyShowDone();
+                    _this._loopBufferState();
                     console.log("onReadyShowDone video isPlay", _this.isPlayingState());
 
                     _this.videoTag.ontimeupdate = () => {
@@ -410,6 +416,29 @@ class NvFlvjsCoreModule {
         return !this.videoTag.paused;
     }
 
+    _loopBufferState() {
+        let _this = this;
+        if (_this.duration <= 0) {
+            _this.duration = _this.videoTag.duration;
+        }
+
+        if (_this.bufferInterval !== null) {
+            window.clearInterval(_this.bufferInterval);
+            _this.bufferInterval = null;
+        }
+
+        _this.bufferInterval = window.setInterval(function() {
+            const bufProgress = _this.videoTag.buffered.end(0);
+            console.log("bufProgress", bufProgress);
+            if (bufProgress >= _this.duration - 0.04) {
+                _this.onCacheProcess && _this.onCacheProcess(_this.duration);
+                window.clearInterval(_this.bufferInterval);
+                return;
+            }
+            _this.onCacheProcess && _this.onCacheProcess(bufProgress);
+        }, 200);
+    }
+
     _releaseFlvjs() {
         this.myPlayer.pause();
         this.myPlayer.unload();
@@ -444,6 +473,10 @@ class NvFlvjsCoreModule {
             window.clearInterval(this.checkPicBlockInterval);
             this.checkPicBlockInterval = null;
         }
+        if (this.bufferInterval !== null) {
+            window.clearInterval(this.bufferInterval);
+            this.bufferInterval = null;
+        }
         this._releaseFlvjs();
 
         this.myPlayerID = null;

diff --git a/src/src/native/nv-videojs-core.js b/src/src/native/nv-videojs-core.js
@@ -52,11 +52,13 @@ class NvVideojsCoreModule {
 		this.showScreen		= false;
 
 		this.playPTS		= 0;
-		this.vCachePTS		= 0;
-		this.aCachePTS		= 0;
+		// this.vCachePTS		= 0;
+		// this.aCachePTS		= 0;
+
+        this.bufferInterval = null;
 
         /*
-         * Event @todo
+         * Event
          */
         this.onMakeItReady      = null;
         this.onLoadFinish       = null;
@@ -65,6 +67,7 @@ class NvVideojsCoreModule {
         this.onSeekFinish 		= null;
         this.onReadyShowDone    = null;
         this.onPlayState        = null;
+        this.onCacheProcess     = null;
     } // constructor
 
     _hiddenUnusedPlugins() {
@@ -195,6 +198,7 @@ class NvVideojsCoreModule {
                 if (_this.configFormat.probeDurationMS >= 0) {
                     _this.onLoadFinish && _this.onLoadFinish();
                     _this.onReadyShowDone && _this.onReadyShowDone();
+                    _this._loopBufferState();
                 }
             });
             _this.myPlayer.on("ended", function() {
@@ -213,6 +217,7 @@ class NvVideojsCoreModule {
             if (_this.configFormat.probeDurationMS < 0) {
                 _this.onLoadFinish && _this.onLoadFinish();
                 _this.onReadyShowDone && _this.onReadyShowDone();
+                _this._loopBufferState();
             }
         });
         this.myPlayer.options.controls = false;
@@ -292,6 +297,29 @@ class NvVideojsCoreModule {
         return !this.myPlayer.paused();
     }
 
+    _loopBufferState() {
+        let _this = this;
+        if (_this.duration <= 0) {
+            _this.duration = _this.videoTag.duration;
+        }
+
+        if (_this.bufferInterval !== null) {
+            window.clearInterval(_this.bufferInterval);
+            _this.bufferInterval = null;
+        }
+
+        _this.bufferInterval = window.setInterval(function() {
+            const bufProgress = _this.videoTag.buffered.end(0);
+            console.log("bufProgress", bufProgress);
+            if (bufProgress >= _this.duration - 0.04) {
+                _this.onCacheProcess && _this.onCacheProcess(_this.duration);
+                window.clearInterval(_this.bufferInterval);
+                return;
+            }
+            _this.onCacheProcess && _this.onCacheProcess(bufProgress);
+        }, 200);
+    }
+
     release() {
         this.myPlayer.dispose();
         this.myPlayerID = null
@@ -305,6 +333,11 @@ class NvVideojsCoreModule {
         this.onReadyShowDone    = null;
         this.onPlayState        = null;
 
+        if (this.bufferInterval !== null) {
+            window.clearInterval(this.bufferInterval);
+            this.bufferInterval = null;
+        }
+
         window.onclick = document.body.onclick = null;
     }