Bug 269693 – Videojs player issue on iOS 17 software update

• Status: NEW
• Component: Media

[Apratim]

Hi,

After iOS 17 software update, we've encountered an anomaly with the video element within our videojs player. Upon video load, there's a noticeable shift and recentring of the video to its correct position.

This issue becomes more pronounced when the player is in a horizontal orientation while the video being played is vertical.

Additionally, we've observed resizing and cropping issues during the initialization of the player, which were not present in earlier versions. In our current implementation, we have a canvas element inserted before the player. Due to resizing, the video sticks to the canvas and fails to return to the correct position.

```
<div>
    <video class="vjs-tech" 
           webkit-playsinline 
           playsinline
           src="hls video source">
     </video>
     <canvas style="filter: blur(15px)" class="vjs-tech custom-canvas" width="412" height="320">
     </canvas>
</div>
```

[Radar WebKit Bug Importer]

<rdar://problem/123269582>

[Jer Noble]

Hi Apratim! Thank you for the bug report. Could you please say whether this issue is still occurring in iOS 18 (or even a later update to iOS 17)?

[Apratim]

Hi Jer, the issue subsided 17.4 onwards. Do we have any insights on this, why this happened?

[Brandon Rowe]

Hi all,

I made a discovery that I believe is related to this issue and seems to provide a solution on our end. In earlier iOS versions, we could successfully go to native fullscreen with correct sizing once metadata was loaded. With iOS 17, though, the metadata doesn't look to be enough.

The workaround we found is to make sure the data for the video (not just metadata) is ready before entering fullscreen. You can do this by checking the `readyState` on the video compared to the `HAVE_CURRENT_DATA` ready state value:

```
if (videoElement.readyState < videoElement.HAVE_CURRENT_DATA) {
  videoElement.addEventListener('loadeddata', () => videoElement.webkitEnterFullscreen());
  // any logic you need to load the video
} else {
  videoElement.webkitEnterFullscreen()
}
```

I hope this is helpful!