Bug 225136

Summary: Short HLS video with 'loop' attribute stutters at the beginning of 3rd loop
Product: WebKit Reporter: Dylan Jhaveri <dylanjhaveri>
Component: MediaAssignee: 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>