flv直播流在chrome中卡在第一帧，播放失败

tidiib commented 5 years ago

代码如下：

const {default: flvjs} = await import('flv.js');
 if (flvjs.isSupported()) {
    this.player = flvjs.createPlayer({
      type: 'flv',
      url: myUrl,
      isLive: true,
    });
    this.player.attachMediaElement(this.videoNode);
    this.player.load();

    this.player.on(flvjs.Events.METADATA_ARRIVED, () => {
      this.player.play();
      this.updatePlayStatus(PageStatus.PLAYING);
    });
}

报错如下：

微信截图_20190408142029

页面初始化的时候才会这样，切换流后能正常播放，

在其它浏览器都没有问题，只有chrome中会这样，而且出现的概率非常高。

adrianhans commented 5 years ago

This may not be a bug of flv.js.

I have the exact same error message "Uncaught (in promise) DOMException" as you. I've stuck at this issue for several days and finally found this may be caused by Chrome permission settings.

Try enter your site settings by click the lock icon (for https) or the info icon (for http) to the left of the URL bar, scroll to "Sound" item, change it from "Automatic(Default)" to "Allow", and refresh the page. It works for me.

BTW, my video source is pure video without sound and I've set up "hasAudio: false" in flvjs.createPlayer config. It seems Chrome's intentional prevention of video/sound playing in background tabs has manslaughtered us.

Look forward to your feedback.

tidiib commented 5 years ago

@adrianhans

Really appreciate your reply.

Yes, it's caused by Chrome autoplay policy. And I have not found a good way to fix this yet.

A compromise is displaying a welcome modal overlay the video to make user interacts with the page.

adrianhans commented 5 years ago

@Nick-Shen thanks for the confirmation. I was stunned by the ongoing issues of this project last week, at least @xqq can close one for now

vegalou commented 4 years ago

In debug mode:

"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD"

flv-player.js:280 Uncaught (in promise)

Just add a button Click to play then it is fixed. (Both Chrome & Opera 60+)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <TITLE> New Document </TITLE>
<script type="text/javascript" language="JavaScript" src="/js/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="/js/flv.min.js"></script>
<script type="text/javascript" language="JavaScript">
var flvPlayer;
$(function(){
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://192.168.137.231:8080/live?port=1935&app=myapp&stream=Test'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
    }
});

var playFLV=function(){
    flvPlayer.play();
}
</script>
 </HEAD>
 <BODY>

<video id="videoElement"></video>

<button onclick="playFLV()">PLAY</button>

<script>
</script>
 </BODY>
</HTML>

bilibili / flv.js

flv直播流在chrome中卡在第一帧，播放失败 #438