hlxsites / vg-macktrucks-com

Franklin site for https://www.macktrucks.com
Apache License 2.0
1 stars 27 forks source link

V2 Embed performance issues #686

Closed cogniSyb closed 2 months ago

cogniSyb commented 2 months ago

Issue Type

Bug

Summary

[v2-embed] configuration not being passed in Safari and general performance issues

Priority

Critical

Description

The iframe with the video we’re loading sends an event we listen to. Then, the video’s configuration is passed. The script in the iframe applies the configuration and loads the video. This needs to happen instantly; after a few milliseconds, the script loads the video with the default configuration.

When multiple videos are loaded on a page, Safari can’t share the configuration in time. We’ve observed a couple of performance issues where the video-related functions on our end were triggered several times.

Affected Device Classes

Mobile, Tablet, Desktop

Affected Browsers/Devices and Versions

Safari on MacOS, Safari on iOS, Safari on iPadOS

Steps to Reproduce

  1. Go to a page with one AEM video. Example with autoplay and controls hidden: https://develop--vg-macktrucks-com--hlxsites.hlx.page/drafts/syb/block/v2-embed-autoplay
  2. Observe the configuration being applied to the video in Safari and other browsers
  3. Open the tab Console in the DevTools of the browser
  4. Observe the log of the [v2-embed] to be present with the event video-loadedmetadata for a video id
  5. Go to a page with multiple AEM videos, like https://develop--vg-macktrucks-com--hlxsites.hlx.page/drafts/syb/block/v2-embed-multiple-config
  6. Observe the configuration being applied:
    • to only one video or none at all on Safari
    • to all videos in other browsers
  7. Open the tab Console in the DevTools of the browser
  8. Observe the log of the [v2-embed] to be present with the event video-loadedmetadata for a video id – multiple times

Expected Results

All videos have the configuration applied after loading. Autoplay videos will autoplay, but videos with disabled controls don’t have controls, etc.

Events are triggered once and functions being executed once per video

Actual Results

Not all videos have the configuration applied after loading.

Be aware that the aspect ratio is handled on our end as passed to the iframe. So, a video with this configuration seems to be handled correctly, even though the configuration hasn’t been received.

Events are triggered multiple times, and functions are executed multiple times per video. We can observe that by the logging of events of [v2-embed] being printed multiple times for the same video.

Attachment

Screenshot 2024-04-11 at 12 10 22