search

videojs / http-streaming

HLS, DASH, and future HTTP streaming protocols library for video.js
https://videojs-http-streaming.netlify.app/
Other
2.45k stars 419 forks source link

Freezing videos when using HLS from cloudflare on chrome #1404

Closed odoumas closed 7 months ago

odoumas commented 1 year ago

Description

Per title. Some cloudflare videos appear to freeze, but only in chrome. On firefox there is a visible "gap", but it handles it gracefully.

Example

The same but on hls.js

Both should be opened on Chrome to reproduce the issue

Sources

This appears on multiple sources, see above for an example

Steps to reproduce

Just visit the links

Results

Expected

The video plays uninterupted

Error output

No error output

Additional Information

While inverstigating, I had managed to reproduce the issue also on hls.js. However, it appears that they fixed this fairly recently. Relevant PR. Maybe it can be of help.

videojs version

latest, reproduced accross multiple versions on both 7 and 8

Browsers

Version 112.0.5615.165 (Official Build) (64-bit)

Platforms

Debian bullseyeing any other javascript libraries or frameworks on the page? if so please list them below.

video-archivist-bot commented 1 year ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

welcome[bot] commented 1 year ago

👋 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.

adrums86 commented 1 year ago

Thanks for filing an issue and providing an example. I can easily reproduce this in the demo page with the media you provided. The PR in hls.js is very helpful as a reference, if that is indeed the same problem it might actually be in mux.js. Labeling this for further investigation.

hitech95 commented 1 year ago

We are facing this issue too, this and the quality that switch continuously. (Cloudlare stream)

I think that the video quality is due to small fragments and the connection time is highter than the transmission time so the bandwith caculation is wrong lowering the quality.

philefstat commented 1 year ago

Facing the same issue and if helpful, we're not using mux, just video.js and cloudflare directly

alistans commented 1 year ago

I have the same issue on Chrome, Android TV's and Tizen TV's, so it seems to be on any Chromium based platform. Safari and Firefox both play the videos fine.

adrums86 commented 1 year ago

I appreciate the additional information. I'll spend some time digging into this today and update this issue with my findings.

adrums86 commented 1 year ago

I wasn't able to spend as much time on this as I'd have liked on Friday, but I did some more poking around in mux over the weekend. I suspect the solution does lie in there. I'm not aware of any configuration of http-streaming that uses anything other than mux.js for transmuxing, please correct me if I'm wrong though. I think we might need to adjust some of the getGopForFusion_ calculation in the mp4/transmuxer. I'm consistently seeing a small (~.1 second) buffer gap in the sample media provided at the end of the first segment, which is causing the freezing/jumping behavior.

bufferGap

I did some playing around with this line but ran out of time this weekend. I'll make some more time to do some proper debugging this week. If anyone else sees a better approach or is able to make more progress please let me know.

video-archivist-bot commented 1 year ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

hitech95 commented 1 year ago

@adrums86 If you need an example of our videojs implementation or access to more video sources please let me know!

adrums86 commented 11 months ago

Been quite busy over the past few weeks, I'm working on prioritizing this issue internally. Will update this thread accordingly.

adrums86 commented 7 months ago

I was looking back trying to re-address some older issues. After testing this media again I can't reproduce the freezing anymore. Tested side by side in Safari, Chrome, and Firefox on an M1 Mac and playback was consistent without freezing or skipping. Going to close this issue for now, we can re-open if anyone is still able to reproduce this.

hitech95 commented 7 months ago

@adrums86 What VideoJS version did you tested with? We are still facing the issues so in case I can provde access to our implementation.

We are using VideoJS from NPM:

"dependencies": {
  ...
  "video.js": "^7.20.0",
  ...
}

If you tested with an updated version is there a way to overrinde the http-streaming component with an older core VideoJS version?

odoumas commented 7 months ago

Cloudflair pushed a fix/improvement recently, so my examples won't exhibit the faulty behaviour anymore.

adrums86 commented 7 months ago

@hitech95 I was testing in the v3.7.0 VHS demo page with the asset originally provided by @odoumas https://customer-e5dv0zdx7q80qq2x.cloudflarestream.com/e0f7c6a0f53e4274b1afb05e7b96e45d/manifest/video.m3u8, but it seems like cloudflare made some changes as well. Does anyone have any other assets that have the same issue that I could debug with? Thanks in advance!

video-archivist-bot commented 7 months ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

hitech95 commented 7 months ago

@hitech95 I was testing in the v3.7.0 VHS demo page with the asset originally provided by @odoumas https://customer-e5dv0zdx7q80qq2x.cloudflarestream.com/e0f7c6a0f53e4274b1afb05e7b96e45d/manifest/video.m3u8, but it seems like cloudflare made some changes as well. Does anyone have any other assets that have the same issue that I could debug with? Thanks in advance!

Please can you try with our asset: https://customer-1bvq8nsj2ktnfpil.cloudflarestream.com/49e66b45541d0998894a478b75d81c8c/manifest/video.m3u8

We are still facing blurring and segments get skipped (starting at 2:55). while with the cloudflare player it is not: https://customer-1bvq8nsj2ktnfpil.cloudflarestream.com/49e66b45541d0998894a478b75d81c8c/watch

video-archivist-bot commented 7 months ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands: