Hls.js: Safari - Video stutters first initial seconds

[intelligence]

What version of Hls.js are you using?

0.12.2

What browser and OS are you using?

Safari 12.0.2 – macOS High Sierra 10.13.6

Test stream:

https://hls-js.netlify.com/demo/?src=https%3A%2F%2Fplayer.vimeo.com%2Fexternal%2F313759552.m3u8%3Fs%3Db537d0bec7626cbf3cbd54bb89e549e0d39c5d37&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImVuYWJsZVdvcmtlciI6dHJ1ZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xLCJ3aWRldmluZUxpY2Vuc2VVcmwiOiIifQ==

Checklist

• [x] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• [x] The issue occurs in the stable client on https://hls-js.netlify.com/demo and not just on my page
• [x] The issue occurs in the latest client on https://hls-js-latest.netlify.com/demo and not just on my page
• [x] The stream has correct Access-Control-Allow-Origin headers (CORS)
• [x] There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

Play video, initial first seconds will stutter. When playing video on vimeo.com there are no stutters (https://vimeo.com/313759552)

Expected behavior

No stutters

Actual behavior

Video stutters

### Console output
-

[itsjamie]

@michaelcunningham19 Can you see the stutter? I wasn't able to repro myself.

[michaelcunningham19]

@itsjamie Yup, I was able to reproduce the stuttering in Safari (12.0)

Turning on Media Logging in Safari (verbose mode) revealed nothing of interest.

Maybe Media Lighthouse will reveal something

[michaelcunningham19]

Play video, initial first seconds will stutter. When playing video on vimeo.com there are no stutters (https://vimeo.com/313759552)

@intelligence After looking at that, it appears vimeo.com is referencing a different stream entirely. On vimeo.com it's referencing a stream with fmp4 segments (with what looks like a custom JSON manifest)

☝️ Neat

[intelligence]

Ah! Didn't even cross me that they'd use something else for their own player.

I'm getting some more reports from testing that the stutter is present on other videos as well. Is this a hls.js issue or something in the way that Vimeo transcode and serve these videos?

[intelligence]

Sent an issue report to Vimeo regarding this issue and got this back:

After taking an extensive look at this, it appears that the stuttering is coming from the hls.js implementation in Safari. Here is why:

1. Playing the hls manifest in Safari using the native player does not result in any stuttering.

2. Playing the video at https://vimeo.com/313759552 on an iPhone which uses the m3u8 not the json manifest, resulted in no playback stuttering.

3. Playing the hls manifest in VLC results in no playback trouble.

The only environment where this issue occurs is in hls.js, which is why this is not a error on our side.

Also, in regards to the video-dev comments on GitHub, we server the json manifest on the site and anywhere we can. Users have the ability to serve m3u8 and we serve it over to any device that can handle MPEG-DASH. So there answers/comments don't really pertain to your issue.

[michaelcunningham19]

@intelligence 👍

Also, in regards to the video-dev comments on GitHub, we server the json manifest on the site and anywhere we can. Users have the ability to serve m3u8 and we serve it over to any device that can handle MPEG-DASH. So there answers/comments don't really pertain to your issue.

Yeah - I was simply calling out that there was a difference, that's all.

I'll take a closer look at this when time allows 😄 The next step would be to try running it through media lighthouse

[intelligence]

Hello again!

Is there some sort of help I can provide to help solve this issue? Let me know and I'll look into it.

[gkindel]

I can repo on 0.12.4 but not v0.11.x

test link

[johnBartos]

Thanks for the test stream @gkindel. Unfortunately I don't see anything obvious in the logs, and it's still an issue in the 1.0.0 test branch. The next steps are to dump the stream into ffprobe and analyze the timings. It works in Chrome which leads me to believe that we have some safari-specific logic that is not working correctly.

[jhonalino]

anyone looking into this issue ? I was able to reproduce this issue and fix it by reducing the liveSyncDuration as close to your chunk duration * 3 as possible, but reducing this causes playback getting stucks on microsoft edge, I'm experimenting with the different config that works with both safari and edge, but at the same time. not break other browsers that are currently working

[Gosha]

I did a git bisect between v0.11.0 and v0.12.0 and it looks like the stuttering started with commit 472614cfc3ff35f1cb2504689481be654d41cda7

Further, bisecting between v0.12.0and master, shows the stuttering gets worse with commit 052feab9f3a3998e95525e5aab92234d82accd6a

[robwalch]

See #2902

With e07232f4a02f2fc1b7022121e4921b7fc7b18950, I don't see any stuttering in that build, but there is some glitching in the first second (https://deploy-preview-2902--hls-js-dev.netlify.app/demo/).

After removing changes to the composition time of frames 114e25d817368f85607aed714eac50cef4f0c052, the glitch is gone, but when starting playback from 0, the video briefly flashes transparent. This is reproducible on Vimeo if you seek back to 0 and play. It's not happening or not noticeable when starting playback from the poster fading to video (https://deploy-preview-2902--hls-js-dev.netlify.app/demo/).

[robwalch]

Latest build with fix https://deploy-preview-2902--hls-js-dev.netlify.app/demo/

[Gosha]

Awesome!

2902 fixes both the stuttering and glitching on Safari for me.