Make WordPress Core

Opened 17 months ago

Closed 9 months ago

Last modified 5 months ago

#54788 closed enhancement (fixed)

Mute a video on WP with [video]

Reported by: prokium's profile prokium Owned by: antpb's profile antpb
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch has-unit-tests needs-dev-note
Focuses: Cc:

Description

Hi guys,

What i did :

I have uploaded a video on my self hosted WP (last release).
On a page, I have put my shortcode as

Behavior that I want too

I would to autoplay it by default.
So, i need to add the autoplay AND to mute the video.
https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
It says : "
Autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be audible, and autoplay blocking applies to them. Inaudible media are not affected by autoplay blocking.
"

So i did that :

[video width="1920" height="1080" mp4="https://georgeabitbol.fr/content/uploads/2022/01/finalV4.mp4" autoplay="on" preload="auto" muted="true"][/video]

And i would like that

<video class="wp-video-shortcode" id="video-0-1" muted="1" autoplay="1" preload="auto" controls="controls" width="696" height="392">
<source type="video/mp4" src="https://georgeabitbol.fr/wp-content/uploads/2022/01/finalV4.mp4?_=1">
</video>

Behavior that i have

<video class="wp-video-shortcode" id="video-0-1" autoplay="1" preload="auto" controls="controls" width="696" height="392">
<source type="video/mp4" src="https://georgeabitbol.fr/wp-content/uploads/2022/01/finalV4.mp4?_=1">
</video>

What needs to change
In wordpress/wp-includes/media.php

$default_types = wp_get_video_extensions();
	$defaults_atts = array(
		'src'      => '',
		'poster'   => '',
		'loop'     => '',
		'autoplay' => '',
		'preload'  => 'metadata',
		'width'    => 640,
		'height'   => 360,
		'muted'		 => '',
		'class'    => 'wp-video-shortcode',
	);

$html_atts = array(
		'class'    => $atts['class'],
		'id'       => sprintf( 'video-%d-%d', $post_id, $instance ),
		'width'    => absint( $atts['width'] ),
		'height'   => absint( $atts['height'] ),
		'poster'   => esc_url( $atts['poster'] ),
		'loop'     => wp_validate_boolean( $atts['loop'] ),
		'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
		'muted' => wp_validate_boolean( $atts['muted'] ),
		'preload'  => $atts['preload'],
	);


foreach ( array( 'poster', 'loop', 'autoplay', 'preload', 'muted' ) as $a ) {
		if ( empty( $html_atts[ $a ] ) ) {
			unset( $html_atts[ $a ] );
		}

Attachments (4)

54788.diff (1.7 KB) - added by antpb 10 months ago.
54788-2.diff (1.7 KB) - added by antpb 10 months ago.
54788-phpunit-test.diff (1.5 KB) - added by costdev 10 months ago.
Tests: Add muted to the test_wp_video_shortcode_attributes test method. @antpb Can you review this patch for addition along with PR 2137 when it's confirmed for commit?
54788-4.patch (3.1 KB) - added by antpb 9 months ago.
Combines the patch and PR for supporting the muted property

Download all attachments as: .zip

Change History (28)

This ticket was mentioned in PR #2137 on WordPress/wordpress-develop by Benouare.


17 months ago
#1

  • Keywords has-patch added

I add the support of the muted attribute in the video tag to be able to use the autoplay.
Currently, the mute wasnt available, so the autoplay looks useless.

More info on : https://core.trac.wordpress.org/ticket/54788

#2 follow-up: @johnbillion
17 months ago

  • Milestone changed from Awaiting Review to 6.0
  • Type changed from defect (bug) to enhancement
  • Version 5.8 deleted

Thanks for the ticket and the PR @prokium. This looks like a good enhancement.

#3 in reply to: ↑ 2 @prokium
17 months ago

Replying to johnbillion:

Thanks for the ticket and the PR @prokium. This looks like a good enhancement.

You welcome! It cost me a loooot of time to understand that WP was not "able" to use the 'muted' attribute. That's surprising...

PS : It's not possible to edit the ticket on track? I would like to correct something.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


17 months ago

#5 follow-up: @antpb
17 months ago

I think it may make more sense to set an initial volume property instead of a mute property so that this feature serves more folks use cases. In the case of tracking a volume property we could follow the startVolume prop described here: https://github.com/mediaelement/mediaelement/blob/master/docs/api.md

If the startVolume is set at zero this will essentially achieve the same result as mute with more options for folks that may just want some very quiet audio on a page.

#6 @antpb
17 months ago

by the way, thank you so much for this enhancement @prokium ! I'm honestly surprised we dont have this ability today! :D

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


15 months ago

#8 @antpb
15 months ago

  • Owner set to antpb
  • Status changed from new to assigned

Assigning to myself to investigate landing this in 6.0

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


14 months ago

#10 in reply to: ↑ 5 @peterwilsoncc
14 months ago

Replying to antpb:

If the startVolume is set at zero this will essentially achieve the same result as mute with more options for folks that may just want some very quiet audio on a page.

While muted and startVolume=0 have the same practical outcome, do they have the same technical outcome?

Specifically, I thinking about situations in which browsers disable auto play for all but muted videos. Do the browsers treat a volume of zero as equivalent?

#11 @costdev
14 months ago

  • Milestone changed from 6.0 to 6.1

With 6.0 Beta 1 releasing yesterday, I'm moving this ticket to the 6.1 milestone.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


11 months ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


10 months ago

@antpb
10 months ago

@antpb
10 months ago

#14 @antpb
10 months ago

Revised the patch in https://github.com/WordPress/wordpress-develop/pull/2137 to include the feedback on adding to the doc block. Should be ready to go!

@costdev
10 months ago

Tests: Add muted to the test_wp_video_shortcode_attributes test method. @antpb Can you review this patch for addition along with PR 2137 when it's confirmed for commit?

#15 @costdev
10 months ago

  • Keywords has-unit-tests added

Also, if 54788-phpunit-test.diff is going to be added to PR 2137, I believe the PR will need a refresh on trunk first. Otherwise, 54788-phpunit-test.diff could just be committed directly to trunk after the PR.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


10 months ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


10 months ago

@antpb
9 months ago

Combines the patch and PR for supporting the muted property

This ticket was mentioned in PR #3231 on WordPress/wordpress-develop by antpb.


9 months ago
#18

This PR is to test the ticket https://core.trac.wordpress.org/ticket/54788
Add support for muting a video element.

#19 @antpb
9 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 54128:

Media: Add muted property for video elements.

This change allows for the muted property to be used in video elements which solves for content that wishes to autoPlay when a page is viewed. Adding muted to video elements adhears to the requirements browsers have to honor autoPlay functionality.

Props prokium, peterwilsoncc, costdev, johnbillion, Benouare.
Fixes #54788.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


9 months ago

#21 @milana_cap
8 months ago

  • Keywords needs-dev-note add-to-field-guide added

This can either go in shared Dev note or just Field guide.

#22 @milana_cap
8 months ago

  • Keywords add-to-field-guide removed

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.


6 months ago

#24 @desrosj
5 months ago

#51564 was marked as a duplicate.

Note: See TracTickets for help on using tickets.