From 789a9ad65195a21ec80a09b7d9c806ec3bc25404 Mon Sep 17 00:00:00 2001
From: Georg Ringer <georg.ringer@gmail.com>
Date: Sun, 8 Jan 2023 16:22:54 +0100
Subject: [PATCH] [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>
---
.../core/Classes/Resource/Rendering/VideoTagRenderer.php | 2 ++
.../core/Classes/Resource/Rendering/VimeoRenderer.php | 2 ++
.../Unit/Resource/Rendering/VideoTagRendererTest.php | 4 ++--
.../Tests/Unit/Resource/Rendering/VimeoRendererTest.php | 8 ++++----
4 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/typo3/sysext/core/Classes/Resource/Rendering/VideoTagRenderer.php b/typo3/sysext/core/Classes/Resource/Rendering/VideoTagRenderer.php
index 37b1a22c99f0..8ec797c2748f 100644
--- a/typo3/sysext/core/Classes/Resource/Rendering/VideoTagRenderer.php
+++ b/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';
diff --git a/typo3/sysext/core/Classes/Resource/Rendering/VimeoRenderer.php b/typo3/sysext/core/Classes/Resource/Rendering/VimeoRenderer.php
index 9a834ef8a66b..ca6bc9f8a995 100644
--- a/typo3/sysext/core/Classes/Resource/Rendering/VimeoRenderer.php
+++ b/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';
diff --git a/typo3/sysext/core/Tests/Unit/Resource/Rendering/VideoTagRendererTest.php b/typo3/sysext/core/Tests/Unit/Resource/Rendering/VideoTagRendererTest.php
index c4b706127bee..96b24e2531a3 100644
--- a/typo3/sysext/core/Tests/Unit/Resource/Rendering/VideoTagRendererTest.php
+++ b/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',
diff --git a/typo3/sysext/core/Tests/Unit/Resource/Rendering/VimeoRendererTest.php b/typo3/sysext/core/Tests/Unit/Resource/Rendering/VimeoRendererTest.php
index 17ed78f865fd..44f47df458db 100644
--- a/typo3/sysext/core/Tests/Unit/Resource/Rendering/VimeoRendererTest.php
+++ b/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&title=0&byline=0&portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
+ '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&muted=1&title=0&byline=0&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&title=0&byline=0&portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
+ '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&muted=1&title=0&byline=0&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&title=0&byline=0&portrait=0" allowfullscreen width="300" height="200" allow="autoplay; fullscreen"></iframe>',
+ '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&muted=1&title=0&byline=0&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&title=0&byline=0&portrait=0" allowfullscreen width="300" height="200" allow="foo; bar"></iframe>',
+ '<iframe src="https://player.vimeo.com/video/7331?autoplay=1&muted=1&title=0&byline=0&portrait=0" allowfullscreen width="300" height="200" allow="foo; bar"></iframe>',
$this->subject->render($fileResourceMock, '300m', '200', ['allow' => 'foo; bar', 'autoplay' => 1])
);
}
--
GitLab