Video is not working, showing frizzed picture or black screen while metadata updates!

[munafio]

Description

I'm building a video player for my app, I used Video.js to achieve that .. So, I used ONLY the APIs of video.js because I build all the controls my self (slider, buttons ...) and their functionalities rely on video.js APIs ..

All things working fine on chrome; but on safari, when I open a video with my player :

• At the first play it starts updating the current time in the UI with black screen, then after a seconds it return to 00:00 to start again but this time it starts as it should (working well).
• when I seek the video, it is loading then after, stops the picture (freeze) but the time is updating also the subtitles shows without the video or a sound.
• the two above cases happens not all time, but the most of time.

BUT, the console has no errors to check or something like that! Preview for the issue

Reduced test case

No response

Steps to reproduce

All things working fine on chrome; but on safari, when I open a video with my player :

• At the first play it starts updating the current time in the UI with black screen, then after a seconds it return to 00:00 to start again but this time it starts as it should (working well).
• when I seek the video, it is loading then after, stops the picture (freeze) but the time is updating also the subtitles shows without the video or a sound.
• the two above cases happens not all time, but the most of time.

Errors

No response

What version of Video.js are you using?

7.18.x

Video.js plugins used.

none

What browser(s) including version(s) does this occur with?

safari 15.5

What OS(es) and version(s) does this occur with?

MacOS Monterey v12.4

[welcome[bot]]

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

[mister-ben]

If it's Safari with native playback it's probably an issue with the video itself, or how it's being served - at least part of this sounds like byte range headers are being ignored by the server. An example would be needed to say anything more specific.

[1giba]

Hey guys, I'm facing the same issue. I've already spent long hours on that. I tried to use only HtmlVideoElement <video /> and I was trying to use video.js now. And I got the video freezing too.

I noticed that the issue occurs in iPhone/iPad mobile devices, using safari.

• Link to check autoplay

I got that issue on iPhone and iPads. It works on Macbook/Android/Linux/Windows.

If someone could support on this, it would be awesone!

Thank you !

@1giba

[riethmue]

I'm not sure if it's the same issue for me but load player and pause player gave me black screen on safari v15 on Mac. Anyway I got the same issue for html5 player so it should not be an issue related to videojs. It seems to be a known apple issue https://developer.apple.com/forums/thread/690523 Adding a (white) background-color to video element fixed this issue for me.

[landsman]

I have black player when it's paused :[