Long load times for RTMP Flash tech on Chrome/IE11/Edge; fails on Firefox

Fenrirthviti commented 7 years ago

Description

Chrome/IE11/Edge takes a very long time to load the flash player, and on Firefox, the player never loads and errors out with:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. Object { code: 4, message: "No compatible source was found for …" }

Reduced test case:

<!DOCTYPE html>
<html>

<head>
    <title>Video Player Test Page</title>
    <link rel="stylesheet" type="text/css" href="/js/vjs/video-js.css">
    <link rel="stylesheet" type="text/css" href="/js/vjs/video-js-skin.css">
</head>

<body>
<video class="video-js vjs-default-skin vjs-fill vjs-big-play-centered" controls autoplay preload id="streamPlayer"
       width="100%" height="100%" poster="//stream.rachni.com/img/channel/channel_Len.png"
       data-setup='{"techOrder": ["flash"],"aspectRatio":"16:9"}'>
    <source src="rtmp://dev.rachni.com/live&Len" type="rtmp/flv" label='Flash'/>
</video>

<script src="/js/vjs/videojs-5.14.1.js"></script>
</body>

</html>

Hosted here: https://dev.rachni.com/dev/player.test.html

I'm happy to help debug this at any time, but as my sources are live streams, I'll need to have them started for the page to work. Feel free to contact me here or via email.

This is making the users of my site very frustrated. I have quite a lot of customization and code invested in video.js, and would prefer to not find another player. Thanks in advance for any advice.

Steps to reproduce

Create a player with an rtmp flv stream
Attempt to load in a browser
Observe long load times before the video actually starts playing

Results

Expected

Expected that the video would start playing within a few seconds of the page loading, as it has in the past. I cannot exactly pinpoint when this changed, but I've tested on quite a few versions of video.js and they all seem to have the same problem.

Actual

Flash player does not load for quite some time (upwards of 30 seconds in some cases) causing users to be confused and think the site has crashed or frozen.

Error output

Firefox only:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. Object { code: 4, message: "No compatible source was found for …" }

I do not believe this is related, but including it anyway (again, Firefox only): mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

Additional Information

versions

videojs

Tested with 5.14.1, 5.12.6, 5.0.0, and 4.12.15 (with their respective .swf versions)

browsers

Chrome, IE11, Edge, and Firefox were tested. Firefox doesn't work at all. Shared results between Chrome, IE11, and Edge

OSes

Currently only tested on Windows 7 and 10

plugins

None

Fenrirthviti commented 7 years ago

I've traced this issue back to failing connections over IPv6. Disabling IPv6 on my local network causes everything to work properly. Closing this issue as the fix will be on my host.

gkatsev commented 7 years ago

Ah, awesome. Glad you were able to figure it out. Sorry we couldn't be of more help.

Fenrirthviti commented 7 years ago

Reopening now that I was able to resolve the IPv6 issues. It appears it's a similar issue, but the opposite. Flash tech is not loading fast enough, and the connection to the source fails. If I can click the play button fast enough, it forces the Flash tech to load, an the stream plays normally, but on refresh of the page, this is failing to do so automatically 95~% of the time.

Fenrirthviti commented 7 years ago

Updated test case:

<!DOCTYPE html>
<html>

<head>
    <title>Video Player Test Page</title>
    <link rel="stylesheet" type="text/css" href="/js/vjs/video-js.css">
    <link rel="stylesheet" type="text/css" href="/js/vjs/video-js-skin.css">
</head>

<body>
<video class="video-js vjs-default-skin vjs-fill vjs-big-play-centered" controls autoplay preload id="streamPlayer"
       width="100%" height="100%" poster="//stream.rachni.com/img/channel/channel_Len.png">
</video>

<script src="/js/vjs/videojs-5.14.1.js"></script>
<script>
    videojs('streamPlayer', {
        techOrder: ['flash'],
        aspectRatio: '16:9',
        sources: [{
            src: 'rtmp://stream.rachni.com/live2&Len',
            type: 'rtmp/flv',
            label: 'Flash'
        }],
    });
</script>
</body>

</html>

With this, if you refresh the page, I'm getting proper load about... 40% of the time (EDIT: Still not working at all on Firefox, regardless of any configurations I've tried) if I had to ballpark. Else, I'm getting the error: VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

Any guidance on having the player wait until the flash tech is ready before trying to load the stream? It seems like it's just a race, and Flash is going to lose most of the time there.

gkatsev commented 7 years ago

Following up from IRC, seems like the culprit is most likely an issue with the nginx-rtmp module. Closing.

videojs / video.js