goldvideo / h265player

一套完整的Web版H.265播放器解决方案,非常适合学习交流和实际应用。基于JS码流解封装、WebAssembly(FFmpeg)视频解码,利用Canvas画布投影、AudioContext播放音频。
https://goldvideo.github.io/h265player/
1.53k stars 298 forks source link

播放暂停的时候,httpworker 有没有办法停止,播放的时候重新请求url。 #48

Open fzw2408 opened 3 years ago

fzw2408 commented 3 years ago

我在做hls方案的时候:需要这样的功能:播放暂停的时候,想让:httpworker 停止,播放的时候重新请求url。 内存溢出复现:暂停后,httpworker 还在不停的请求数据。。。 看遍全代码,没有 stop这个功能。 pause:暂停只是相对于点播是没问题的。 如果hls直播的话,重新链接播放,stop就直接关闭下载了。 同类播放器:easyplayer.js这个东西就是这么干的。 我现在困扰的东西就是这个 httpwork 。。。 image

yiwen03 commented 3 years ago

Hls loader里有个设置,可以设置请求的ts的数量

------------------ 原始邮件 ------------------ 发件人: fzw2408 <notifications@github.com> 发送时间: 2021年1月21日 20:15 收件人: goldvideo/h265player <h265player@noreply.github.com> 抄送: Subscribed <subscribed@noreply.github.com> 主题: 回复:[goldvideo/h265player] 播放暂停的时候,httpworker 有没有办法停止,播放的时候重新请求url。 (#48)

我在做hls方案的时候:需要这样的功能:播放暂停的时候,想让:httpworker 停止,播放的时候重新请求url。 内存溢出复现:暂停后,httpworker 还在不停的请求数据。。。 看遍全代码,没有 stop这个功能。 pause:暂停只是相对于点播是没问题的。 如果hls直播的话,重新链接播放,stop就直接关闭下载了。 同类播放器:easyplayer.js这个东西就是这么干的。 我现在困扰的东西就是这个 httpwork 。。。

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

fzw2408 commented 3 years ago

config.js 中的这个吗? const BUFFER = { //单位秒 maxDuration: 30, maxSize: 1024 1000 1000, maxRetryCount: 3 } HLSLoader.js中这两个没有相应的控制代码。之定义了一下。 maxBufferDuration = BUFFER.maxDuration maxBufferSize = BUFFER.maxSize

提个修改建议 :如果有更好的解决思路据更好了。

Element.js中 static adaptSizeElement(width, height, $container, $element) { const $box = $container const $canvas = $element $canvas.width = width || $canvas.width || $box.offsetWidth $canvas.height = height || $canvas.height || $box.offsetHeight const canvasWidth = $canvas.width const canvasHeight = $canvas.height let proportion = 0 $canvas.style.position = 'absolute'

if ($box.offsetWidth <= 0) {
  $box.style.width =  canvasWidth + 'px'
}
if ($box.offsetHeight <= 0) {
  $box.style.height = canvasHeight + 'px'
}

const widthProportion = $box.offsetWidth / canvasWidth
const heightProportion = $box.offsetHeight / canvasHeight

if (heightProportion > widthProportion) {
  proportion = widthProportion
} else {
  proportion = heightProportion
}
$canvas.style.top = $box.offsetTop + (($box.offsetHeight - canvasHeight * proportion) / 2)  + 'px'
****$canvas.style.left = 0+'px'//$box.offsetLeft + (($box.offsetWidth - canvasWidth * proportion) / 2)  + 'px'
//$canvas.style.transform = `scale(${proportion }, ${proportion }) //页面发生伸缩的时候定位会错位。 我的做法直接铺满screen_canve
$canvas.style.transform = `scale(${widthProportion}, ${heightProportion})`****
$canvas.style['transform-origin'] = `top left`;
$canvas.style.display = 'inline-block'

} }