[BUGFIX] Mute autoplayed videos

Set the argument `muted` if autoplay is enabled for vimeo and local
videos - just as done for YouTube videos in #96320

Resolves: #99301
Resolves: #99461
Related: #96320
Releases: main, 11.5
Change-Id: I81848a724dc736b49c4c98c4c2f59627be169f8d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/77432


Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Nikita Hovratov <nikita.h@live.de>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Nikita Hovratov <nikita.h@live.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>

typo3/sysext/core/Classes/Resource/Rendering/VideoTagRenderer.php

@@ -98,6 +98,8 @@ class VideoTagRenderer implements FileRendererInterface
         }
         if (!empty($options['autoplay'])) {
             $attributes[] = 'autoplay';
+            // If autoplay is enabled, enforce muted, see https://developer.chrome.com/blog/autoplay/
+            $attributes[] = 'muted';
         }
         if (!empty($options['muted'])) {
             $attributes[] = 'muted';

typo3/sysext/core/Classes/Resource/Rendering/VimeoRenderer.php

@@ -138,6 +138,8 @@ class VimeoRenderer implements FileRendererInterface
         $urlParams = [];
         if (!empty($options['autoplay'])) {
             $urlParams[] = 'autoplay=1';
+            // If autoplay is enabled, enforce muted=1, see https://developer.chrome.com/blog/autoplay/
+            $urlParams[] = 'muted=1';
         }
         if (!empty($options['loop'])) {
             $urlParams[] = 'loop=1';

typo3/sysext/core/Tests/Unit/Resource/Rendering/VideoTagRendererTest.php

@@ -90,12 +90,12 @@ class VideoTagRendererTest extends UnitTestCase
             [
                 '//:path/myVideoFile',
                 ['autoplay' => 1],
-                '<video width="300" height="200" controls autoplay><source src="//:path/myVideoFile" type="video/mp4"></video>',
+                '<video width="300" height="200" controls autoplay muted><source src="//:path/myVideoFile" type="video/mp4"></video>',
             ],
             [
                 '//:path/myVideoFile',
                 ['controls' => 0, 'autoplay' => 1],
-                '<video width="300" height="200" autoplay><source src="//:path/myVideoFile" type="video/mp4"></video>',
+                '<video width="300" height="200" autoplay muted><source src="//:path/myVideoFile" type="video/mp4"></video>',
             ],
             [
                 '//:path/myVideoFile',

typo3/sysext/core/Tests/Unit/Resource/Rendering/VimeoRendererTest.php

@@ -117,7 +117,7 @@ class VimeoRendererTest extends UnitTestCase
         $fileResourceMock = $this->createMock(File::class);
 
         self::assertSame(
-            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
+            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
             $this->subject->render($fileResourceMock, '300m', '200', ['autoplay' => 1])
         );
     }
@@ -134,7 +134,7 @@ class VimeoRendererTest extends UnitTestCase
         $fileReferenceMock->method('getOriginalFile')->willReturn($fileResourceMock);
 
         self::assertSame(
-            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
+            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
             $this->subject->render($fileReferenceMock, '300m', '200')
         );
     }
@@ -147,7 +147,7 @@ class VimeoRendererTest extends UnitTestCase
         $fileResourceMock = $this->createMock(File::class);
 
         self::assertSame(
-            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
+            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
             $this->subject->render($fileResourceMock, '300m', '200', ['autoplay' => 1])
         );
     }
@@ -212,7 +212,7 @@ class VimeoRendererTest extends UnitTestCase
         $fileResourceMock = $this->createMock(File::class);
 
         self::assertSame(
-            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="foo; bar"></iframe>',
+            '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen width="300" height="200" allow="foo; bar"></iframe>',
             $this->subject->render($fileResourceMock, '300m', '200', ['allow' => 'foo; bar', 'autoplay' => 1])
         );
     }