Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

直播画面停止 #206

Open
ThreeFat opened this issue Sep 25, 2017 · 37 comments
Open

直播画面停止 #206

ThreeFat opened this issue Sep 25, 2017 · 37 comments

Comments

@ThreeFat
Copy link

谦谦你好,想你请教个问题。
我使用flv.js做直播,但是一旦网页被最小化或者是tab被切换到别的页面,不在当前正在直播的页面,等下一次再回到直播页面时,发现视频画面卡住不动了,但是我观察到Network中的流传输并没有停止,所以我想请教一下这是这么回事,是否是参数不对,代码如下。

if (flvjs.isSupported()) {
    let player = ele;
    destroyPlayer(this.livePlayer.player2);
    livePlayer.player = flvjs.createPlayer({
         type: 'flv',
         url: 'http://127.0.0.1:7001/live/movie.flv',
         hasAudio: false,
         isLive: true                         
    },{        
         isLive: true,                                                                                                   
         deferLoadAfterSourceOpen: true,
         enableStashBuffer: true,
         autoCleanupSourceBuffer: true          
    });
    livePlayer.player2.attachMediaElement(player);
    livePlayer.player2.load();
    livePlayer.player2.play();
@xqq
Copy link
Contributor

xqq commented Sep 25, 2017

chrome?

@ThreeFat
Copy link
Author

是的,chrome,请问这个参数具体是什么作用
deferLoadAfterSourceOpen

@IShinji
Copy link

IShinji commented Sep 26, 2017

我这面也是用的直播的源,只传了type 和 url。没有这个问题。给你参考一下。

@ThreeFat
Copy link
Author

不使用 isLive ?
这样不会当造成延时累积吗

@ThreeFat
Copy link
Author

请问是什么原因导致呢?每次切换到别的页面停留一会,再切换回直播页面,画面就卡住了,偶尔不会卡住也会造成很大的延迟。是哪个参数设置的不会吗?

@IShinji
Copy link

IShinji commented Sep 27, 2017

换个直播视频源供应商试试?

@ThreeFat
Copy link
Author

尝试过更换直播视频源,还是一样的出现这个现象。

@xqq
Copy link
Contributor

xqq commented Sep 27, 2017

切页面造成画面卡住可能是浏览器导致的问题。
目前已知最新的chrome 62会在标签页处于后台时暂时挂起视频解码,切回时会恢复,但我这里没有遇到任何问题。另,这一点与flv.js没有直接关系。

@ThreeFat
Copy link
Author

这是我使用的Chrome版本号版本 60.0.3112.113(正式版本) (32 位)
是的,就标签页处于后台时视频会卡住,切换回来时偶尔能恢复,并且如果正常恢复后几个直播窗口的延时都不同,我找不到原因所在,所以只能求助大神了

@ThreeFat
Copy link
Author

谦谦,经过一段时间测试,发现Chrome(最新)标签后台挂起直播卡住,切换回来时常恢复不了,经测试在Firefox上没有出现这个问题,不知道您有没有什么解决方法或者想法?

@xqq
Copy link
Contributor

xqq commented Oct 12, 2017

看下chrome://media-internals里对应的log, 还有chrome://gpu底部的log

@ThreeFat
Copy link
Author

chrome://gpu底部的log:
image

chrome://media-internals对应log:
image

@xqq
Copy link
Contributor

xqq commented Oct 12, 2017

你GPU进程都崩了

@ThreeFat
Copy link
Author

GPU进程为什么会崩掉诶?

@xqq
Copy link
Contributor

xqq commented Oct 12, 2017

不清楚, 你切回来画面是不是绿了

@ThreeFat
Copy link
Author

没有变绿,只是视频卡住不动,不过fetch还在加载数据,如果想要恢复必须要重新detachMediaElement,后然attachMediaElement,再load,但是这种体验很不好

@xqq
Copy link
Contributor

xqq commented Oct 15, 2017

建议换台机器试试

@ThreeFat
Copy link
Author

观察发现bilibili对直播视频解码方式是软解,后台标签之后明显发现CPU占用率下降,而我的却好像没有,后台标签发现CPU占用率波动很小,是否是因为视频采用的是硬解码,请问,可以通过flv.js来进行控制浏览器的解码方式吗?

@xqq
Copy link
Contributor

xqq commented Oct 16, 2017

不能.
显然解码方式由不得flv.js决定,bilibili更不可能主动采用软解

@ThreeFat
Copy link
Author

那真的困扰,也尝试过使用bilibili上的媒体流,同样会卡住,这说明不是流的问题也和解码方式无关,那只能前端程序的问题,可一直找不到根源所在.

@ThreeFat
Copy link
Author

也怀疑过是不是同一个页面视频窗口太多导致,尝试减少到只有一个窗口,问题依旧.

@xqq
Copy link
Contributor

xqq commented Oct 16, 2017

所以换别的机器试过没

@ThreeFat
Copy link
Author

试过了,更换了多台机器,也测试过多个版本的Chrome,尝试依然如此.

@ThreeFat
Copy link
Author

发现Chrome标签页后台时,画面暂停,恢复之后呢继续刚才的时间点播放.比如:现在我有一个摄像头正在直播,摄像头上时间在切换标签页是为10.30.50, 那在一分钟之后切换回来直播是接着刚才的时间 10.30.50,继续的,而不是10.31.50,这是为什么呢,这么才能让直播流一直是最新的呢?

@ZSC714725
Copy link

有遇到过谷歌浏览器拉http-flv流长时间后画面卡住或者崩溃的情况吗

@XmYellow
Copy link

请问你解决了吗,关于切换页签,回来继续播放新时间的问题。我使用的方法会重新刷一下,感觉体验很不好。

@hengwangm
Copy link

视频流只有设置为hasAudio为false的时候就会重现这个问题。@xqq

@yanye411325
Copy link

yanye411325 commented Jun 26, 2018

视频流参数添加设置 hasAudio:false 的时候就可以解决 纯视频流了加载但video不显示的问题。@xqq @hengwangm

@f056917
Copy link

f056917 commented Jul 8, 2019

我遇到了同样的问题,安卓微信H5浏览器自带一个全屏的功能,播放视频时点击全屏,再切回来就卡在切全屏时候的画面了,目前还不知道怎么解决

@fancyluo88
Copy link

发现Chrome标签页后台时,画面暂停,恢复之后呢继续刚才的时间点播放.比如:现在我有一个摄像头正在直播,摄像头上时间在切换标签页是为10.30.50, 那在一分钟之后切换回来直播是接着刚才的时间 10.30.50,继续的,而不是10.31.50,这是为什么呢,这么才能让直播流一直是最新的呢?

我也遇到这个问题,你后面是怎么解决的呢,看到有说监听document.addEventListener('visibilitychange',pageHiddenHandler,false);这个事件然后处理currentTime的

@tannnb
Copy link

tannnb commented Nov 16, 2019

发现Chrome标签页后台时,画面暂停,恢复之后呢继续刚才的时间点播放.比如:现在我有一个摄像头正在直播,摄像头上时间在切换标签页是为10.30.50, 那在一分钟之后切换回来直播是接着刚才的时间10.30.50,继续的,而不是10.31.50,这是为什么呢,这么才能让直播流一直是最新的呢?

大佬,我也遇到和您类似问题,也是存在多个视频播放; 有些视频会卡主;在addLogListener里面看到,卡住的话是[MSEController] > MediaSource onSourceEnded这个信息,请问大佬有解决办法吗?

@hlgf
Copy link

hlgf commented Aug 13, 2020

MediaSource

解决了嘛,兄弟,我也存在这个问题

@Aruna1990
Copy link

这个问题有人知道怎么解决吗?

@Corgis
Copy link

Corgis commented Jul 22, 2022

发现Chrome标签页后台时,画面暂停,恢复之后呢继续刚才的时间点播放.比如:现在我有一个摄像头正在直播,摄像头上时间在切换标签页是为10.30.50, 那在一分钟之后切换回来直播是接着刚才的时间 10.30.50,继续的,而不是10.31.50,这是为什么呢,这么才能让直播流一直是最新的呢?

我也遇到了这个问题,请问有想到解决办法么?

@xiangzi1
Copy link

xiangzi1 commented Sep 9, 2022

换成火狐浏览器就没问题

@JunCxio
Copy link

JunCxio commented Dec 16, 2022

我这边用的方法是监听tab页, 切回来的时候跳到最近的一帧

@JasonGaoG
Copy link

同问,而且我们后端的机制是一段时间不播放不拉流了,链接就断开了,必须重新加载,这样体验就比较差了。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests