Merge pull request #6581 from ampproject/bug/4635-disable-mute-when-autoplay-subset

Remove `muted` attribute from `amp-video` and its `video` fallback when `autoplay` is present

Author: westonruter

includes/sanitizers/class-amp-video-sanitizer.php

@@ -63,6 +63,9 @@ public function sanitize() {
 
 		if ( $this->args['add_noscript_fallback'] ) {
 			$this->initialize_noscript_allowed_attributes( self::$tag );
+
+			// Omit muted from noscript > video since it causes deprecation warnings in validator.
+			unset( $this->noscript_fallback_allowed_attributes['muted'] );
 		}
 
 		for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {
@@ -312,6 +315,14 @@ private function filter_attributes( $attributes ) {
 			}
 		}
 
+		/*
+		 * The amp-video will forcibly be muted whenever it is set to autoplay.
+		 * So omit the `muted` attribute if it exists.
+		 */
+		if ( isset( $out['autoplay'], $out['muted'] ) ) {
+			unset( $out['muted'] );
+		}
+
 		return $out;
 	}
 }

tests/php/test-amp-video-sanitizer.php

@@ -62,6 +62,11 @@ public function get_data() {
 				'<amp-video src="https://example.com/file.mp4" class="amp-wp-unknown-size" height="400" layout="fixed-height" width="auto"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
 			],
 
+			'video_with_autoplay' => [
+				'<video src="https://example.com/file.mp4" autoplay muted width="160" height="80"></video>',
+				'<amp-video src="https://example.com/file.mp4" autoplay width="160" height="80" layout="responsive"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4" autoplay width="160" height="80"></video></noscript></amp-video>',
+			],
+
 			'local_video_without_dimensions' => [
 				sprintf( '<video src="%s"></video>', '{{video_url}}' ),
 				sprintf( '<amp-video src="%1$s" width="560" height="320" layout="responsive"><a href="%1$s" fallback="">%1$s</a><noscript><video src="%1$s"></video></noscript></amp-video>', '{{video_url}}' ),
@@ -109,12 +114,12 @@ public function get_data() {
 
 			'video_with_allowlisted_attributes__enabled' => [
 				'<video width="300" height="300" src="https://example.com/video.mp4" controls loop="true" muted="muted"></video>',
-				'<amp-video width="300" height="300" src="https://example.com/video.mp4" controls="" loop="" muted="" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls loop="true" muted="muted"></video></noscript></amp-video>',
+				'<amp-video width="300" height="300" src="https://example.com/video.mp4" controls="" loop="" muted="" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls loop="true"></video></noscript></amp-video>',
 			],
 
 			'video_with_allowlisted_attributes__disabled' => [
 				'<video width="300" height="300" src="https://example.com/video.mp4" controls="false" loop="false" muted="false"></video>',
-				'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls="false" loop="false" muted="false"></video></noscript></amp-video>',
+				'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls="false" loop="false"></video></noscript></amp-video>',
 			],
 
 			'video_with_custom_attribute' => [