diff --git a/extensions/amp-dailymotion/0.1/amp-dailymotion.js b/extensions/amp-dailymotion/0.1/amp-dailymotion.js index 577d3ecf1983..f2b4c9494222 100644 --- a/extensions/amp-dailymotion/0.1/amp-dailymotion.js +++ b/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; } diff --git a/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js b/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js index e96b8bf2604b..40521b510a79 100644 --- a/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js +++ b/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(