WordPress.org

Make WordPress Core

Opened 17 months ago

Last modified 4 months ago

#50060 new defect (bug)

Header Video: Use playVideo after mute instead of autoplay to prevent video blocking because of autoplay with sound enabled

Reported by: olivierblancdev Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Customize Keywords: needs-patch
Focuses: Cc:

Description

Hi,

wp-includes\js\wp-custom-header.js uses autoplay to play video.

When it's a video managed by the NativeHandler, the mute attribute is set on the creation of the video element, so there is no problem.

But when it's a YouTube video managed by the YouTubeHandler, the YouTube player is created with the autoplay option active, and the video is muted on the onReady event of the YouTube player. So it can happend that the video tries to autoplay before beeing muted, especially with Firefox, then the video is stopped by the web browser because there is autoplay with sound enabled.

I propose to use e.target.playVideo() after e.target.mute() instead of autoplay to prevent the web browser from blocking the Youtube video if the autoplay starts before e.target.mute() is executed.

Please see https://github.com/WordPress/WordPress/pull/471 with the pull request to correct the bug with this solution (or attached files).

Best regards,
Olivier Blanc, web developper

Attachments (2)

wp-custom-header.js (10.7 KB) - added by olivierblancdev 17 months ago.
wp-includes\js\wp-custom-header.js
wp-custom-header.min.js (4.4 KB) - added by olivierblancdev 17 months ago.
wp-includes\js\wp-custom-header.min.js

Download all attachments as: .zip

Change History (4)

@olivierblancdev
17 months ago

wp-includes\js\wp-custom-header.js

@olivierblancdev
17 months ago

wp-includes\js\wp-custom-header.min.js

#1 @SergeyBiryukov
17 months ago

  • Component changed from General to Customize

#2 @celloexpressions
4 months ago

  • Keywords needs-patch added
  • Summary changed from Use playVideo after mute instead of autoplay to prevent video blocking because of autoplay with sound enabled to Header Video: Use playVideo after mute instead of autoplay to prevent video blocking because of autoplay with sound enabled

The proposed change (as linked in the pull request above) seems like it would work, but I'm not completely clear on the need for the change.

It seems like both muting and autoplaying should be specified in the <video> element mark. Or both should be triggered with JS. But we shouldn't need to do a combination of both, which could cause unintended side effects.

As a next step, it would be great to see more research into preferred methods for handling silent autoplayed videos that core could take inspiration from. The linked pull request above should also be turned into an actual patch or linked pull request.

Note: See TracTickets for help on using tickets.