🐛 Update amp-dailymotion to use autoplay workaround. (#35493)

* [`amp-dailymotion`] Update amp-dailymotion to use autoplay workaround.

* [`amp-dailymotion`] Remove unnecessary console.log statement.

extensions/amp-dailymotion/0.1/amp-dailymotion.js

@@ -37,6 +37,7 @@ import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '#service/video-manager-impl';
 import {isLayoutSizeDefined} from '#core/dom/layout';
 import {parseQueryString} from '#core/types/string/url';
+import {isAutoplaySupported} from '#core/dom/video';
 
 const TAG = 'amp-dailymotion';
 
@@ -302,6 +303,14 @@ class AmpDailymotion extends AMP.BaseElement {
     const implicitParams = getDataParamsFromAttributes(this.element);
     iframeSrc = addParamsToUrl(iframeSrc, implicitParams);
 
+    // In order to support autoplay the video needs to be muted on load so we
+    // dont receive an unmute event which prevents the video from autoplay.
+    if (
+      this.element.hasAttribute('autoplay') &&
+      isAutoplaySupported(this.win)
+    ) {
+      iframeSrc = addParamsToUrl(iframeSrc, {'mute': 1});
+    }
     return iframeSrc;
   }
 

extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js

@@ -31,7 +31,12 @@ describes.realWin(
       doc = win.document;
     });
 
-    async function getDailymotion(videoId, optResponsive, optCustomSettings) {
+    async function getDailymotion(
+      videoId,
+      optResponsive,
+      optCustomSettings,
+      optAutoplay
+    ) {
       const dailymotion = doc.createElement('amp-dailymotion');
       dailymotion.setAttribute('data-videoid', videoId);
       dailymotion.setAttribute('width', '111');
@@ -43,6 +48,9 @@ describes.realWin(
         dailymotion.setAttribute('data-start', 123);
         dailymotion.setAttribute('data-param-origin', 'example&.org');
       }
+      if (optAutoplay) {
+        dailymotion.setAttribute('autoplay', true);
+      }
       doc.body.appendChild(dailymotion);
       await dailymotion.buildInternal();
       await dailymotion.layoutCallback();
@@ -76,6 +84,24 @@ describes.realWin(
       );
     });
 
+    it('renders already muted when autoplay is enabled', async () => {
+      const dailymotion = await getDailymotion('x2m8jpp', false, false, true);
+      const iframe = dailymotion.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.src).to.equal(
+        'https://www.dailymotion.com/embed/video/x2m8jpp?api=1&html=1&app=amp&mute=1'
+      );
+    });
+
+    it('renders without mute when autoplay and mute are not explicitly added', async () => {
+      const dailymotion = await getDailymotion('x2m8jpp', false, false);
+      const iframe = dailymotion.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.src).to.equal(
+        'https://www.dailymotion.com/embed/video/x2m8jpp?api=1&html=1&app=amp'
+      );
+    });
+
     it('requires data-videoid', () => {
       return allowConsoleError(() => {
         return getDailymotion('').should.eventually.be.rejectedWith(