mirror of
https://github.com/bytedance/xgplayer.git
synced 2025-04-05 03:05:02 +08:00
fix(xgplayer): 修复xgplayer-hls.js在遇到ts文件不存在时无限重试的问题，fix #981
This commit is contained in:
liushanyuan
liushanyuan
parent
e9c87af0ca
commit
da25a99bc2
36
fixtures/hlsjs/index.html
Normal file
36
fixtures/hlsjs/index.html
Normal file
@ -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>
|
||||
155
fixtures/hlsjs/index.js
Normal file
155
fixtures/hlsjs/index.js
Normal file
@ -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()
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user