HLS Video Freezes and Buffers on Android Chrome

[harinath01]

Description

• While playing HLS videos on Video.js in Android Chrome (specific version - 121.0.6167.101), I've encountered a recurring problem where the video frequently freezes, while the audio continues playing in the background. After a short freeze period, the player buffers and resumes playback. and this issue seems specific to Android Chrome.

Sources

• https://d384padtbeqfgy.cloudfront.net/transcoded/5E7JHcgdsF4/720p/video.m3u8

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Go to https://videojs-http-streaming.netlify.app/
2. Paste the given URL as a source URL and load the player.
3. You can see the video freezing around the 32nd and 44th seconds for example.

Results

Expected

Please describe what you expected to happen that did not happen in the description.

• Video should play without freezing or buffering frequently.

Error output

If there are any errors in the console, from the player, or anywhere else please include them here:
Getting this error in the console on Android Chrome, although it doesn't appear to be directly related. Including it for reference.

video.core.js:210 VIDEOJS: ERROR: TypeError: Class constructor MenuButton cannot be invoked without 'new'
    at new SourceMenuButton (videojs-http-source-selector.js:87:27)
    at ControlBar.addChild (video.core.js:4213:21)
    at Player.<anonymous> (videojs-http-source-selector.js:233:49)
    at data.dispatcher (video.core.js:2206:33)
    at trigger (video.core.js:2337:27)
    at Player.trigger (video.core.js:3204:14)
    at Player.<computed> [as handleTechLoadedmetadata_] (video.core.js:27354:19)
    at Player.<anonymous> (video.core.js:23417:81)
    at data.dispatcher (video.core.js:2206:33)

Additional Information

Please include any additional information necessary here. Including the following:

• The same source works fine with the hls.js player https://hlsjs.video-dev.org/demo/

videojs-http-streaming version

what version of videojs-http-streaming does this occur with?

• videojs-http-streaming 3.11.0

videojs version

what version of videojs does this occur with?

• video.js 8.11.0

Browsers

what browsers are affected? please include browser and version for each

• Android chrome - 121.0.6167.101

Platforms

what platforms are affected? please include operating system and version or device and version for each

• Android 11; RMX2001 Build/RPIA.200720.011

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below.

• None

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below.

• None

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[wonkwangzong]

Have you found a solution to this problem? I'm asking because the same phenomenon occurred to me.

[harinath01]

No, @wonkwangzong I haven't found it yet. Still working on it

[mister-ben]

FWIW, I don't observe any pausing on that video with a very slightly different Chrome version (121.0.6167.143) on a Pixel 7 with Android 14.
The Class constructor error is a red herring, do to with a plugin and not impacting playback, and won't display now.

[harinath01]

@mister-ben Thank you for checking it, but this problem specifically occurs on Oppo and Realme mobile devices.

[yonga00]

hello. I am experiencing freezing when seeking on the HLS VOD service.

Could this be a similar phenomenon?

This only happens in Android Chrome and does not occur in Samsung browsers.

What do other people think?

[leonatajeff]

Any luck? @harinath01 I'm experiencing the same on Android Chrome 113.0.5672.136. I have a Pixel 2 XL emulator but this seems to be reproducible on physical Android devices too.