fix(xgplayer): 修复xgplayer-hls.js在遇到ts文件不存在时无限重试的问题，fix #981

bytedance · Nov 21, 2023 · da25a99 · da25a99
1 parent e9c87af
commit da25a99
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 6 deletions.
diff --git a/fixtures/hlsjs/index.html b/fixtures/hlsjs/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HLS.js 测试</title>
+  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+</head>
+
+<body class="text-base">
+  <div class="container p-3">
+    <div id="player"></div>
+  </div>
+
+  <div id="log" class="container p-3">
+    <div class="flex flex-center">
+      <h3 class="text-lg font-semibold text-indigo-500">日志</h3>
+      <label class="ml-3 p-1 bg-gray-200">暂停事件<input id="log-pause" type="checkbox" /></label>
+    </div>
+    <div class="flex flex-wrap">
+      <div class="mr-2">
+        <h4>事件</h4>
+        <div id="event" class="h-40 bg-gray-200" style="resize: both; overflow: scroll; width: 500px;"></div>
+      </div>
+      <div>
+        <h4>错误</h4>
+        <div id="error" class="h-40 bg-gray-200" style="resize: both; overflow: scroll; width: 500px;"></div>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="./index.js"></script>
+</body>
+</html>
diff --git a/fixtures/hlsjs/index.js b/fixtures/hlsjs/index.js
@@ -0,0 +1,155 @@
+import Player from '../../packages/xgplayer/src'
+import HlsJsPlugin from '../../packages/xgplayer-hls.js/src'
+
+localStorage.setItem('xgd', 1)
+function defaultOpt() {
+  return {
+    isLive: true,
+    autoplay: false,
+    autoplayMuted: false,
+    retryTimes: 3,
+    retryCount: 3,
+    retryDelay: 1000,
+    analyzeDuration: 5000,
+    loadTimeout: 10000,
+    bufferBehind: 10,
+    maxJumpDistance: 3,
+    maxReaderInterval: 5000,
+    seamlesslyReload: false
+  }
+}
+var cachedOpt = localStorage.getItem('xg:test:hlsjs:opt')
+try {
+  cachedOpt = JSON.parse(cachedOpt)
+} catch (error) {
+  cachedOpt = undefined
+}
+var opts = Object.assign(
+  {
+    url: 'http://127.0.0.1:8081/fixtures/hlsjs/video/0001-4kcountry-road.m3u8'
+  },
+  defaultOpt(),
+  cachedOpt
+)
+var testPoint = Number(localStorage.getItem('xg:test:hlsjs:point'))
+
+if (isNaN(testPoint)) testPoint = 0
+
+window.onload = function () {
+  var dlEvent = document.getElementById('event')
+  var dlError = document.getElementById('error')
+  var dlLogPause = document.getElementById('log-pause')
+
+  function inp(d) {
+    return d.getElementsByTagName('input')[0]
+  }
+
+  var player
+
+
+  function initPlayer() {
+    if (player) {
+      player.destroy()
+      setTimeout(init, 100)
+    } else {
+      init()
+    }
+    function init() {
+      window.player = player = new Player({
+        el: document.getElementById('player'),
+        plugins: [HlsJsPlugin],
+        url: opts.url,
+        isLive: opts.isLive,
+        autoplay: opts.autoplay,
+        autoplayMuted: opts.autoplayMuted,
+      })
+      dlEvent.innerHTML = ''
+      dlError.innerHTML = ''
+
+      function pushEvent(name, value, container) {
+        container = container || dlEvent
+        if (container === dlEvent && dlLogPause.checked) return
+        console.debug('[test]', name, value)
+        if (container === dlEvent) {
+          return
+        }
+        try {
+          value = JSON.stringify(value)
+        } catch (error) {}
+        var record = document.createElement('div')
+        record.innerHTML =
+          '<div class="mb-2"><span class="text-base pr-2 bg-green-500 text-white">' +
+          name +
+          ' / ' +
+          player.video.currentTime +
+          '</span>' +
+          value +
+          '</div>'
+        container.prepend(record)
+      }
+
+      player.on('loadstart', function (event) {
+        pushEvent('loadstart', event)
+      })
+      player.on('loadeddata', function (event) {
+        pushEvent('loadeddata', event)
+      })
+      player.on('play', function (event) {
+        pushEvent('play', event)
+      })
+      player.on('pause', function (event) {
+        pushEvent('pause', event)
+      })
+      player.on('ended', function (event) {
+        pushEvent('ended', event)
+      })
+      player.on('autoplay_was_prevented', function (event) {
+        pushEvent('autoplay_was_prevented', event)
+      })
+      player.on('playing', function (event) {
+        pushEvent('playing', event)
+      })
+      player.on('seeking', function (event) {
+        pushEvent('seeking', event)
+      })
+      player.on('seeked', function (event) {
+        pushEvent('seeked', event)
+      })
+      player.on('waiting', function (event) {
+        pushEvent('waiting', event)
+      })
+      player.on('canplay', function (event) {
+        pushEvent('canplay', event)
+      })
+      player.on('durationchange', function (event) {
+        pushEvent('durationchange', event)
+      })
+      player.on('ready', function (event) {
+        pushEvent('ready', event)
+      })
+      player.on('complete', function (event) {
+        pushEvent('complete', event)
+      })
+      player.on('urlchange', function (event) {
+        pushEvent('urlchange', event)
+      })
+      player.on('destroy', function (event) {
+        pushEvent('destroy', event)
+      })
+      player.on('replay', function (event) {
+        pushEvent('replay', event)
+      })
+      player.on('retry', function (event) {
+        pushEvent('retry', event)
+      })
+      player.on('core_event', function (event) {
+        pushEvent(event.eventName, event)
+      })
+      player.on('error', function (event) {
+        pushEvent(event.errorType, event, dlError)
+      })
+    }
+  }
+
+  initPlayer()
+}
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "libd": "node ./scripts/cli.js",
     "dev:xgplayer": "yarn libd dev fixtures/xgplayer",
     "dev:hls": "yarn libd dev fixtures/hls",
+    "dev:hlsjs": "yarn libd dev fixtures/hlsjs",
     "dev:flv": "yarn libd dev fixtures/flv",
     "dev:flvjs": "yarn libd dev fixtures/flvjs",
     "dev:mp4": "yarn libd dev fixtures/mp4",

diff --git a/packages/xgplayer-hls.js/package.json b/packages/xgplayer-hls.js/package.json
@@ -35,7 +35,7 @@
   "dependencies": {
     "deepmerge": "2.0.1",
     "event-emitter": "^0.3.5",
-    "hls.js": "^1.0.7"
+    "hls.js": "^1.4.12"
   },
   "peerDependencies": {
     "xgplayer": ">=3.0.0-next.0",

diff --git a/packages/xgplayer-hls.js/src/index.js b/packages/xgplayer-hls.js/src/index.js
@@ -93,7 +93,9 @@ class HlsJsPlugin extends BasePlugin {
       if (data.fatal) {
         switch (data.type) {
           case Hls.ErrorTypes.NETWORK_ERROR:
-            this.hls.startLoad()
+            if (!(data?.networkDetails?.status === 404)) {
+              this.hls.startLoad()
+            }
             break
           case Hls.ErrorTypes.MEDIA_ERROR:
             this.hls.recoverMediaError()

diff --git a/yarn.lock b/yarn.lock
@@ -3636,10 +3636,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hls.js@^1.0.7:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.3.tgz#9326a680f5905631f86344d0ae155b5ef9d1bad7"
-  integrity sha512-EE1MjIYDNO+ynbmCpAWfhUwQpyG8gUcKKuGDGgYgfRmW/g+inQUQ8sVVVY5WZaCxEGxDMGLbXhXGepkmDIMvdw==
+hls.js@^1.4.12:
+  version "1.4.12"
+  resolved "https://bnpm.byted.org/hls.js/-/hls.js-1.4.12.tgz#2022daa29d10c662387d80a5297f8330f8ef5ee2"
+  integrity sha512-1RBpx2VihibzE3WE9kGoVCtrhhDWTzydzElk/kyRbEOLnb1WIE+3ZabM/L8BqKFTCL3pUy4QzhXgD1Q6Igr1JA==
 
 hosted-git-info@^2.1.4:
   version "2.8.9"