[Video Player]: Not working properly on safary

[tweenn]

Description

Quick Description

The way that the video player works is failing on safari@macOS - as of now, a user has to double click a video to watch it.
Aka - click on an inline player poster and click again on the player to play it - or click in a cta/poster to open a overlay and then click again in the player to watch it.

Longer description

Player inner workings:

Northstar & Carbon create a "poster" with a thumbnail & other media-information and upon user interaction (either mouse or keyboard click) the poster goes away and the kaltura player is added to the DOM through a javascript controlled iFrame.
The player is instantiated with auto-play and muted (per browser rules) and a code-generated click is emitted through javascript to unmute the player.
This "fake" click works on other browsers 'cause the page has already been interacted with - in the form of the user clicking in the fake poster.

The problem:

In safari, the .play() action of the video element failed as it should for videos that auto-play with sound.
This mean that the fake click is working and unmuting the player but it's not considered a valid user click - triggering the browser to stop the video as like we were trying to bypass the rule.

After some study on the matter, I've found out that if the player element exists in the page in the time that the poster is clicked (aka the user interaction is generated) - this "failing behavior" won't happen, making me believe that Safari changed the rules around this first interaction of the user AND newer elements in the DOM tree.

When:

I'm not sure in which Safari release this happened (my best guess is somewhere in v15) - but it updated something around media autoplay rules and broke the video player experience.

Possible solution

Instead of instantiating the player after the user click the poster, the player has to be added on page-load - which may hinder the page speed and performance (need a more detailed study on impact)
There is a stub-not-optimised example in the "steps to reproduce" section (last link)

Component(s) impacted

Video Player
Canary Audio Player

Browser

Safari

Carbon for IBM.com version

latest

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

mediacenter.ibm.com

Package

@carbon/ibmdotcom-react, @carbon/ibmdotcom-web-components

CodeSandbox example

https://tweenn.github.io/carbon-for-ibm-dot-com-media-player-safari-examples/?path=/story/introduction--page

Steps to reproduce the issue (if applicable)

In safari, macOs, enter in any of the following pages and click on the player without clicking anywhere else in the page.

• Carbon Video Component - Web Components:

  • My example
  • Carbon for IBM dot Com storybook

• Carbon Video Component - React:

  • Carbon for IBM dot Com storybook

• Northstar Video Widget - Kaltura

  • My example
  • Northstar official doc for Kaltura's Video Widget
  • Drupal live page

This behavior can also be observed in Northstar's youtube widget

• Northstar official doc for Youtube's Video Widget

This behavior is not happening in my (not-optimised) proposal

• Not Optimised Working Example

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[tweenn]

Hey everyone!

After the Office Hours that happened today, I've agreed with @ariellalgilmore to add some extra information here, like a more detailed diagram on how the players (carbon and northstar) currently works and the changes for the proposed solution - and also how this change would affect (benefit) the audio-player that is currently in react-canary.

I'll do so in two new comments (one for each topic) - for better view in github.

[tweenn]

Disclaimer

• The northstar/v18 flow for both YouTube and IBM Video [former uStream] is here to illustrate how it was done in other players versus how we're doing with Kaltura's.
• The proposed solution is only for the kaltura player in both frameworks and should not touch the legacy players for both YouTube and IBM Video [former uStream]

Diagrams

Current State

• Framework: Northstar
• Player vendors: Youtube & IBM Video [uStream]

---

• Framework: Northstar & Carbon
• Player vendors: Kaltura

---

Proposed Solution

• Framework: Northstar & Carbon
• Player vendors: Kaltura

[tweenn]

Audio Player

Disclaimer

The audio player ALSO suffers from double clicking in safari, but since you have "less visual clues" about it not working, the user experience is way more degraded than the video-player.

---

Description

As we create a poster for the video to force the user to interact with the player before invoking it in the dom, the audio player don't have such elegant solution and thus it get all interaction buttons disabled (there was a discussion around this behavior in the first PR of the audio player, here)

Here's how it look like:

---

Now, if the player get invoked in the page before the user click, those disabled buttons can be set to enabled as soon as the player emits the "ready to play" notification through the kaltura-api, just like as if a user had clicked, making not only the user experience better but also solving the double-click-clueless issue.

[stale]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[andy-blum]

I'm not seeing this in action on safari today.

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/iframe.html?args=&id=components-video-player--default&viewMode=story

@tweenn are you able to replicate this issue still?

[tweenn]

@andy-blum - Sorry for the really late reply!

Unfortunately I'm still having the issue, buuuut I have to point out that I'm still using an outdate version of both MacOs and Safari!

• MacOs: Monterey 12.6
• Safari: Version 16.0 (17614.1.25.9.10, 17614)

I'll do a screen capture of the issue for documentation purposes and then update everything and re-do the checkins and screen-cap.

[andy-blum]

bump @tweenn

[tweenn]

Hey @andy-blum
Sorry for the humongous delay on this response.
I had lost my Mac and changed orgs, things were crazy by that time.

ANYWAY, problem still persists.

safari-16.min.mp4

safari-16-5-1.min.mp4

safari-16-5-2.min.mp4

safari-17.min.mp4