feat(video-player): enable autoplay & load as muted

packages/web-components/src/components/video-player/__stories__/video-player.stories.ts

@@ -77,6 +77,42 @@ export const withLightboxMediaViewer = (args) => {
   `;
 };
 
+export const autoplay = (args) => {
+  const { aspectRatio, caption, hideCaption, thumbnail, videoId } =
+    args?.VideoPlayer ?? {};
+  return html`
+    <dds-video-player-container
+      auto-play
+      playing-mode="inline"
+      video-id=${videoId}
+      aspect-ratio=${aspectRatio}
+      caption=${caption}
+      ?hide-caption=${hideCaption}
+      thumbnail=${thumbnail}></dds-video-player-container>
+  `;
+};
+
+export const autoplayMuted = (args) => {
+  const { caption, hideCaption, thumbnail, videoId } = args?.VideoPlayer ?? {};
+  return html`
+    <style>
+      dds-video-player-container[background-mode] {
+        display: block;
+        aspect-ratio: 16/9;
+        outline: 2px solid red;
+      }
+    </style>
+    <dds-video-player-container
+      auto-play
+      muted
+      playing-mode="inline"
+      video-id=${videoId}
+      caption=${caption}
+      ?hide-caption=${hideCaption}
+      thumbnail=${thumbnail}></dds-video-player-container>
+  `;
+};
+
 aspectRatio4x3.story = {
   name: 'Aspect ratio 4:3',
   parameters: {
@@ -166,6 +202,62 @@ withLightboxMediaViewer.story = {
   },
 };
 
+autoplay.story = {
+  name: 'Autoplay',
+  parameters: {
+    knobs: {
+      VideoPlayer: () => {
+        return {
+          aspectRatio: '4x3',
+          caption: text('Custom caption (caption):', ''),
+          hideCaption: boolean('Hide caption (hideCaption):', false),
+          thumbnail: text('Custom thumbnail (thumbnail):', ''),
+          videoId: '0_ibuqxqbe',
+        };
+      },
+    },
+    propsSet: {
+      default: {
+        VideoPlayer: {
+          aspectRatio: '4x3',
+          caption: '',
+          hideCaption: false,
+          thumbnail: '',
+          videoId: '0_ibuqxqbe',
+        },
+      },
+    },
+  },
+};
+
+autoplayMuted.story = {
+  name: 'Autoplay muted',
+  parameters: {
+    knobs: {
+      VideoPlayer: () => {
+        return {
+          aspectRatio: '4x3',
+          caption: text('Custom caption (caption):', ''),
+          hideCaption: boolean('Hide caption (hideCaption):', false),
+          thumbnail: text('Custom thumbnail (thumbnail):', ''),
+          videoId: '0_ibuqxqbe',
+        };
+      },
+    },
+    propsSet: {
+      default: {
+        VideoPlayer: {
+          aspectRatio: '4x3',
+          caption: '',
+          hideCaption: false,
+          thumbnail: '',
+          videoId: '0_ibuqxqbe',
+        },
+      },
+    },
+  },
+};
+
 export default {
   title: 'Components/Video player',
   decorators: [

packages/web-components/src/components/video-player/video-player-composite.ts

@@ -141,6 +141,12 @@ class DDSVideoPlayerComposite extends HybridRenderMixin(
   @property({ type: Boolean, attribute: 'auto-play' })
   autoPlay = false;
 
+  /**
+   * `true` load videos with sound muted.
+   */
+  @property({ type: Boolean, attribute: 'muted' })
+  muted = false;
+
   /**
    * The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.
    */
@@ -212,7 +218,7 @@ class DDSVideoPlayerComposite extends HybridRenderMixin(
   /**
    * The current playback state
    */
-  @property()
+  @property({ type: Boolean })
   isPlaying = false;
 
   /**

packages/web-components/src/components/video-player/video-player-container.ts

@@ -170,27 +170,23 @@ export const DDSVideoPlayerContainerMixin = <
       const storedValue = localStorage.getItem(
         `${this.prefersAutoplayStorageKey}`
       );
-      const returnValue =
-        storedValue === null ? null : Boolean(parseInt(storedValue, 10));
-      return returnValue;
+
+      if (storedValue === null) {
+        return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      } else {
+        return Boolean(parseInt(storedValue, 10));
+      }
     }
 
-    _getPlayerOptions(backgroundMode = false) {
+    _getPlayerOptions() {
+      const { backgroundMode, autoPlay, muted } =
+        this as unknown as DDSVideoPlayerComposite;
       let playerOptions = {};
+      const autoplayPreference = autoPlay
+        ? this._getAutoplayPreference()
+        : false;
 
       if (backgroundMode) {
-        const storedMotionPreference: boolean | null =
-          this._getAutoplayPreference();
-
-        let autoplayPreference: boolean | undefined;
-
-        if (storedMotionPreference === null) {
-          autoplayPreference = !window.matchMedia(
-            '(prefers-reduced-motion: reduce)'
-          ).matches;
-        } else {
-          autoplayPreference = storedMotionPreference;
-        }
         playerOptions = {
           'topBarContainer.plugin': false,
           'controlBarContainer.plugin': false,
@@ -209,6 +205,11 @@ export const DDSVideoPlayerContainerMixin = <
             plugin: false,
           },
         };
+      } else {
+        playerOptions = {
+          autoMute: muted,
+          autoPlay: autoplayPreference,
+        };
       }
 
       return playerOptions;
@@ -221,7 +222,7 @@ export const DDSVideoPlayerContainerMixin = <
      * @private
      */
     // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    async _embedVideoImpl(videoId: string, backgroundMode = false) {
+    async _embedVideoImpl(videoId: string) {
       const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode')
         ? (this.getRootNode() as Document | ShadowRoot)
         : this.ownerDocument;
@@ -242,7 +243,7 @@ export const DDSVideoPlayerContainerMixin = <
       const embedVideoHandle = await KalturaPlayerAPI.embedMedia(
         videoId,
         playerId,
-        this._getPlayerOptions(backgroundMode)
+        this._getPlayerOptions()
       );
       const { width, height } = await KalturaPlayerAPI.api(videoId);
       videoPlayer.style.setProperty('--native-file-width', `${width}px`);
@@ -282,15 +283,15 @@ export const DDSVideoPlayerContainerMixin = <
      * @param videoId The video ID.
      * @internal
      */
-    _embedMedia = async (videoId: string, backgroundMode = false) => {
+    _embedMedia = async (videoId: string) => {
       const { _requestsEmbedVideo: requestsEmbedVideo } = this;
       const requestEmbedVideo = requestsEmbedVideo[videoId];
 
       if (requestEmbedVideo) {
         return requestEmbedVideo;
       }
 
-      const promiseEmbedVideo = this._embedVideoImpl(videoId, backgroundMode);
+      const promiseEmbedVideo = this._embedVideoImpl(videoId);
 
       this._setRequestEmbedVideoInProgress(videoId, promiseEmbedVideo);
       try {

packages/web-components/src/components/video-player/video-player.ts

@@ -79,7 +79,8 @@ class DDSVideoPlayer extends FocusMixin(
   private _renderContent() {
     const { contentState, name, thumbnailUrl, backgroundMode } = this;
     return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL &&
-      !backgroundMode
+      !backgroundMode &&
+      !this.autoplay
       ? html`
           <div class="${prefix}--video-player__video">
             <button
@@ -183,9 +184,15 @@ class DDSVideoPlayer extends FocusMixin(
   /**
    * `true` to autoplay, mute video, and hide UI
    */
-  @property({ attribute: 'background-mode', reflect: true })
+  @property({ attribute: 'background-mode', reflect: true, type: Boolean })
   backgroundMode: boolean = false;
 
+  /**
+   * `true` to autoplay
+   */
+  @property({ attribute: 'auto-play', reflect: true, type: Boolean })
+  autoplay: boolean = false;
+
   /**
    * Custom video description. This property should only be set when using `playing-mode="lightbox"`
    */
@@ -288,7 +295,12 @@ class DDSVideoPlayer extends FocusMixin(
       (this.parentElement as DDSVideoPlayerContainer)?.backgroundMode
     );
 
+    const parentIsAutoplay = Boolean(
+      (this.parentElement as DDSVideoPlayerContainer)?.autoPlay
+    );
+
     this.backgroundMode = parentIsBackground;
+    this.autoplay = parentIsAutoplay;
   }
 
   /**