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.


git-svn-id: https://develop.svn.wordpress.org/trunk@54128 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Anthony Burchell 2022-09-11 22:17:04 +00:00
parent bb20a18040
commit 1c69513245
2 changed files with 8 additions and 1 deletions

View File

@ -3219,6 +3219,7 @@ function wp_get_video_extensions() {
* @type string $poster The 'poster' attribute for the `<video>` element. Default empty.
* @type string $loop The 'loop' attribute for the `<video>` element. Default empty.
* @type string $autoplay The 'autoplay' attribute for the `<video>` element. Default empty.
* @type string $muted The 'muted' attribute for the `<video>` element. Default false.
* @type string $preload The 'preload' attribute for the `<video>` element.
* Default 'metadata'.
* @type string $class The 'class' attribute for the `<video>` element.
@ -3263,6 +3264,7 @@ function wp_video_shortcode( $attr, $content = '' ) {
'poster' => '',
'loop' => '',
'autoplay' => '',
'muted' => 'false',
'preload' => 'metadata',
'width' => 640,
'height' => 360,
@ -3390,11 +3392,12 @@ function wp_video_shortcode( $attr, $content = '' ) {
'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'],
);
// These ones should just be omitted altogether if they are blank.
foreach ( array( 'poster', 'loop', 'autoplay', 'preload' ) as $a ) {
foreach ( array( 'poster', 'loop', 'autoplay', 'preload', 'muted' ) as $a ) {
if ( empty( $html_atts[ $a ] ) ) {
unset( $html_atts[ $a ] );
}

View File

@ -1023,6 +1023,7 @@ VIDEO;
/**
* @ticket 35367
* @ticket 54788
* @depends test_video_shortcode_body
*/
public function test_wp_video_shortcode_attributes() {
@ -1035,6 +1036,7 @@ VIDEO;
$this->assertStringContainsString( 'src="https://example.com/foo.mp4', $actual );
$this->assertStringNotContainsString( 'loop', $actual );
$this->assertStringNotContainsString( 'autoplay', $actual );
$this->assertStringNotContainsString( 'muted', $actual );
$this->assertStringContainsString( 'preload="metadata"', $actual );
$this->assertStringContainsString( 'width="640"', $actual );
$this->assertStringContainsString( 'height="360"', $actual );
@ -1046,6 +1048,7 @@ VIDEO;
'poster' => 'https://example.com/foo.png',
'loop' => true,
'autoplay' => true,
'muted' => true,
'preload' => true,
'width' => 123,
'height' => 456,
@ -1057,6 +1060,7 @@ VIDEO;
$this->assertStringContainsString( 'poster="https://example.com/foo.png', $actual );
$this->assertStringContainsString( 'loop="1"', $actual );
$this->assertStringContainsString( 'autoplay="1"', $actual );
$this->assertStringContainsString( 'muted', $actual );
$this->assertStringContainsString( 'preload="1"', $actual );
$this->assertStringContainsString( 'width="123"', $actual );
$this->assertStringContainsString( 'height="456"', $actual );