Bug 225136

Summary:	Short HLS video with 'loop' attribute stutters at the beginning of 3rd loop
Product:	WebKit	Reporter:	Dylan Jhaveri <dylanjhaveri>
Component:	Media	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED WORKSFORME
Severity:	Normal	CC:	ben, bfulgham, chrisguttandin, dylanjhaveri, jer.noble, simon.fraser, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari 14
Hardware:	iPhone / iPad
OS:	iOS 14

Description Dylan Jhaveri 2021-04-27 21:15:37 PDT

Under the following conditions, the video stutters:

  - Using <video> element with a src that links to an HLS manifest that has multiple renditions
  - Using the `loop` attribute
  - Short video (~30 seconds-ish)

I tested this with multiple different sources. It doesn't appear to be an issue specific to one kind of video encoding or container format.

This is a demonstration with 4 different video sources:

Link: https://66vmt.csb.app/
Code: https://codesandbox.io/s/66vmt

Debugging:

  - I tried "manually" looping the video by avoiding the `loop` attribute and instead running javascript that listens for the player 'ended' event and calls play(). This did not help
  - The bug doesn't seem to happen on older iPhone (couldn't get it to happen with iPhone 8)
  - I tried with a single-rendition HLS manifest, same bug

This is my first time filing a Safari bug, is this the right place and is "Compositing" the correct component? It was the only component I found that mentioned video.

Comment 1 Dylan Jhaveri 2021-04-27 21:20:02 PDT

This is a screen recording of what happens at the beginning of the 3rd loop

https://stream.new/v/02f8U9SCYbzYpIl26vYO00tS54VOzMfi5G2wvFrx02YOIA

Comment 2 Radar WebKit Bug Importer 2021-05-04 21:16:20 PDT

<rdar://problem/77540326>