diff --git a/packages/core/src/dom_components/model/ComponentVideo.ts b/packages/core/src/dom_components/model/ComponentVideo.ts index 2100d83a99..1bd420723c 100644 --- a/packages/core/src/dom_components/model/ComponentVideo.ts +++ b/packages/core/src/dom_components/model/ComponentVideo.ts @@ -26,7 +26,7 @@ export default class ComponentVideo extends ComponentImage { viUrl: 'https://player.vimeo.com/video/', loop: false, poster: '', - muted: 0, + muted: false, autoplay: false, controls: true, color: '', @@ -50,12 +50,13 @@ export default class ComponentVideo extends ComponentImage { updatePropsFromAttr() { if (this.get('provider') === defProvider) { - const { controls, autoplay, loop } = this.get('attributes')!; + const { controls, autoplay, loop, muted } = this.get('attributes')!; const toUp: ObjectAny = {}; if (isDef(controls)) toUp.controls = !!controls; if (isDef(autoplay)) toUp.autoplay = !!autoplay; if (isDef(loop)) toUp.loop = !!loop; + if (isDef(muted)) toUp.muted = !!muted; // Update for muted if (!isEmptyObj(toUp)) { this.set(toUp); @@ -111,6 +112,7 @@ export default class ComponentVideo extends ComponentImage { hasParam(qr.color) && this.set('color', qr.color); qr.rel === '0' && this.set('rel', 0); qr.modestbranding === '1' && this.set('modestbranding', 1); + qr.muted === '1' && this.set('muted', true); break; default: } @@ -157,6 +159,7 @@ export default class ComponentVideo extends ComponentImage { attr.loop = !!this.get('loop'); attr.autoplay = !!this.get('autoplay'); attr.controls = !!this.get('controls'); + attr.muted = !!this.get('muted'); } return attr; @@ -206,6 +209,7 @@ export default class ComponentVideo extends ComponentImage { this.getAutoplayTrait(), this.getLoopTrait(), this.getControlsTrait(), + this.getMutedTrait(), ]; } /** @@ -237,6 +241,7 @@ export default class ComponentVideo extends ComponentImage { name: 'modestbranding', changeProp: true, }, + this.getMutedTrait(), ]; } @@ -262,6 +267,7 @@ export default class ComponentVideo extends ComponentImage { }, this.getAutoplayTrait(), this.getLoopTrait(), + this.getMutedTrait(), ]; } @@ -307,6 +313,20 @@ export default class ComponentVideo extends ComponentImage { }; } + /** + * Return object trait + * @return {Object} + * @private + */ + getMutedTrait() { + return { + type: 'checkbox', + label: 'Muted', + name: 'muted', + changeProp: true, + }; + } + /** * Returns url to youtube video * @return {string} @@ -318,10 +338,9 @@ export default class ComponentVideo extends ComponentImage { const list = this.get('list'); url += id + (id.indexOf('?') < 0 ? '?' : ''); url += list ? `&list=${list}` : ''; - url += this.get('autoplay') ? '&autoplay=1&mute=1' : ''; + url += this.get('autoplay') ? '&autoplay=1' : ''; + url += this.get('muted') ? '&mute=1' : ''; url += !this.get('controls') ? '&controls=0&showinfo=0' : ''; - // Loop works only with playlist enabled - // https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work url += this.get('loop') ? `&loop=1&playlist=${id}` : ''; url += this.get('rel') ? '' : '&rel=0'; url += this.get('modestbranding') ? '&modestbranding=1' : ''; @@ -347,7 +366,8 @@ export default class ComponentVideo extends ComponentImage { getVimeoSrc() { let url = this.get('viUrl') as string; url += this.get('videoId') + '?'; - url += this.get('autoplay') ? '&autoplay=1&muted=1' : ''; + url += this.get('autoplay') ? '&autoplay=1' : ''; + url += this.get('muted') ? '&muted=1' : ''; url += this.get('loop') ? '&loop=1' : ''; url += !this.get('controls') ? '&title=0&portrait=0&badge=0' : ''; url += this.get('color') ? '&color=' + this.get('color') : ''; diff --git a/packages/core/src/dom_components/view/ComponentVideoView.ts b/packages/core/src/dom_components/view/ComponentVideoView.ts index 9769d74fe3..68f0063d22 100644 --- a/packages/core/src/dom_components/view/ComponentVideoView.ts +++ b/packages/core/src/dom_components/view/ComponentVideoView.ts @@ -18,7 +18,7 @@ export default class ComponentVideoView extends ComponentImageView `change:${p}`).join(' '); this.listenTo(model, 'change:provider', this.updateProvider); this.listenTo(model, 'change:src', this.updateSrc); @@ -80,6 +80,7 @@ export default class ComponentVideoView extends ComponentImageView