@mux/mux-player 0.1.0-beta.21 → 0.1.0-beta.24

package/src/media-theme-mux/media-theme-mux.ts

@@ -1,4 +1,4 @@
-import 'media-chrome';
+import { MediaTheme } from 'media-chrome';
 import { html, render } from '../html';
 import '../media-chrome/time-display';
 
@@ -14,27 +14,60 @@ const MediaChromeSizes = {
 };
 
 type ThemeMuxTemplateProps = {
-  streamType: string;
+  streamType: string | null;
   audio: boolean;
-  playerSize: string;
+  playerSize: string | null;
   defaultHiddenCaptions: boolean;
-  hasCaptions: boolean;
-  forwardSeekOffset: number;
-  backwardSeekOffset: number;
+  forwardSeekOffset: string | null;
+  backwardSeekOffset: string | null;
 };
 
-const template = (props: ThemeMuxTemplateProps) => html`
-  <style>
-    ${cssStr}
-  </style>
+export default class MediaThemeMux extends MediaTheme {
+  static get observedAttributes() {
+    return [
+      'audio',
+      'stream-type',
+      'player-size',
+      'default-hidden-captions',
+      'forward-seek-offset',
+      'backward-seek-offset',
+    ];
+  }
 
-  <media-controller audio="${props.audio || false}" class="size-${props.playerSize}">
-    <slot name="media" slot="media"></slot>
-    <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
-    ${ChromeRenderer(props)}
-    <slot></slot>
-  </media-controller>
-`;
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const props = {
+      audio: this.hasAttribute('audio'),
+      streamType: this.getAttribute('stream-type'),
+      playerSize: this.getAttribute('player-size'),
+      defaultHiddenCaptions: this.hasAttribute('default-hidden-captions'),
+      forwardSeekOffset: this.getAttribute('forward-seek-offset'),
+      backwardSeekOffset: this.getAttribute('backward-seek-offset'),
+    };
+
+    render(
+      html`
+        <style>
+          ${cssStr}
+        </style>
+        <media-controller audio="${props.audio || false}" class="size-${props.playerSize}">
+          <slot name="media" slot="media"></slot>
+          <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+          ${ChromeRenderer(props)}
+          <slot></slot>
+        </media-controller>
+      `,
+      this.shadowRoot as Node
+    );
+  }
+}
+
+if (!customElements.get('media-theme-mux')) {
+  customElements.define('media-theme-mux', MediaThemeMux);
+}
 
 const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
   const { streamType, playerSize, audio } = props;
@@ -42,7 +75,7 @@ const ChromeRenderer = (props: ThemeMuxTemplateProps) => {
     switch (streamType) {
       case StreamTypes.LIVE:
       case StreamTypes.LL_LIVE: {
-        return AudioLiveChrome(props);
+        return AudioLiveChrome();
       }
       case StreamTypes.DVR:
       case StreamTypes.LL_DVR: {
@@ -152,6 +185,13 @@ const MediaFullscreenButton = () => html`
   ${icons.FullscreenExit()}
 </media-fullscreen-button>`;
 
+// prettier-ignore
+const MediaCastButton = () => html`
+<media-cast-button>
+  ${icons.CastEnter()}
+  ${icons.CastExit()}
+</media-cast-button>`;
+
 export const AudioVodChrome = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar>
     ${MediaPlayButton()} ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}
@@ -160,8 +200,7 @@ export const AudioVodChrome = (props: ThemeMuxTemplateProps) => html`
     ${MediaMuteButton()}
     <media-volume-range></media-volume-range>
     <media-playback-rate-button></media-playback-rate-button>
-    ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaAirplayButton()} ${MediaCastButton()}
   </media-control-bar>
 `;
 
@@ -175,29 +214,27 @@ export const AudioDvrChrome = (props: ThemeMuxTemplateProps) => html`
     ${MediaMuteButton()}
     <media-volume-range></media-volume-range>
     <media-playback-rate-button></media-playback-rate-button>
-    ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaAirplayButton()} ${MediaCastButton()}
   </media-control-bar>
 `;
 
-export const AudioLiveChrome = (_props: ThemeMuxTemplateProps) => html`
+export const AudioLiveChrome = () => html`
   <media-control-bar>
     ${MediaPlayButton()}
     <slot name="seek-to-live-button"></slot>
     ${MediaMuteButton()}
     <media-volume-range></media-volume-range>
-    ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaAirplayButton()} ${MediaCastButton()}
   </media-control-bar>
 `;
 
 // prettier-ignore
 export const VodChromeExtraSmall = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar slot="top-chrome">
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     <div class="mxp-spacer"></div>
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
@@ -213,9 +250,9 @@ export const VodChromeExtraSmall = (props: ThemeMuxTemplateProps) => html`
 // prettier-ignore
 export const VodChromeSmall = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar slot="top-chrome" style="justify-content: flex-end;">
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
@@ -250,9 +287,9 @@ export const VodChromeLarge = (props: ThemeMuxTemplateProps) => html`
     <media-volume-range></media-volume-range>
     <div class="mxp-spacer"></div>
     <media-playback-rate-button></media-playback-rate-button>
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
     ${MediaFullscreenButton()}
     <div class="mxp-padding-2"></div>
@@ -267,9 +304,9 @@ export const LiveChromeSmall = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar slot="top-chrome">
     <slot name="seek-to-live-button"></slot>
     <div class="mxp-spacer"></div>
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
@@ -295,9 +332,9 @@ export const LiveChromeLarge = (props: ThemeMuxTemplateProps) => html`
     ${MediaMuteButton()}
     <media-volume-range></media-volume-range>
     <div class="mxp-spacer"></div>
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
     ${MediaFullscreenButton()}
   </media-control-bar>
@@ -309,9 +346,9 @@ export const DvrChromeExtraSmall = VodChromeExtraSmall;
 // prettier-ignore
 export const DvrChromeSmall = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar slot="top-chrome" style="justify-content: flex-end;">
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
   </media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
@@ -344,55 +381,11 @@ export const DvrChromeLarge = (props: ThemeMuxTemplateProps) => html`
     <media-volume-range></media-volume-range>
     <slot name="seek-to-live-button"></slot>
     <div class="mxp-spacer"></div>
-    ${props.hasCaptions ? MediaCaptionsButton(props) : html``}
+    ${MediaCaptionsButton(props)}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
     ${MediaFullscreenButton()}
     <div class="mxp-padding-2"></div>
   </media-control-bar>
 `;
-
-function getProps(el: MediaThemeMux, state?: any): ThemeMuxTemplateProps {
-  return {
-    audio: el.hasAttribute('audio'),
-    streamType: el.getAttribute('stream-type'),
-    playerSize: el.getAttribute('player-size'),
-    defaultHiddenCaptions: el.hasAttribute('default-hidden-captions'),
-    hasCaptions: el.hasAttribute('has-captions'),
-    forwardSeekOffset: el.getAttribute('forward-seek-offset'),
-    backwardSeekOffset: el.getAttribute('backward-seek-offset'),
-    ...state,
-  };
-}
-
-class MediaThemeMux extends HTMLElement {
-  static get observedAttributes() {
-    return [
-      'audio',
-      'stream-type',
-      'player-size',
-      'default-hidden-captions',
-      'has-captions',
-      'forward-seek-offset',
-      'backward-seek-offset',
-    ];
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' });
-    render(template(getProps(this)), this.shadowRoot as Node);
-  }
-
-  attributeChangedCallback() {
-    render(template(getProps(this)), this.shadowRoot as Node);
-  }
-}
-
-if (!customElements.get('media-theme-mux')) {
-  customElements.define('media-theme-mux', MediaThemeMux);
-}
-
-export default MediaThemeMux;

package/src/media-theme-mux/styles.css

@@ -3,20 +3,44 @@
 }
 
 :host {
-  color: var(--primary-color);
-  --media-icon-color: var(--primary-color);
-  --media-range-thumb-background: var(--primary-color);
-  --media-range-bar-color: var(--primary-color);
+  --_primary-color: var(--primary-color, #fff);
+
+  --media-icon-color: var(--_primary-color);
+  --media-range-thumb-background: var(--_primary-color);
+  --media-range-bar-color: var(--_primary-color);
   --media-control-background: var(--secondary-color);
   --media-control-hover-background: var(--secondary-color);
-  --media-time-buffered-color: rgba(255, 255, 255, 0.7);
+  --media-time-buffered-color: rgba(255, 255, 255, 0.4);
   --media-range-track-background: rgba(255, 255, 255, 0.5);
   --media-range-track-border-radius: 3px;
+  --media-preview-thumbnail-border: 1px solid #fff;
+  --media-preview-thumbnail-border-radius: 2px;
+  --media-preview-time-margin: 5px 0 2px;
+  color: var(--_primary-color);
   display: inline-block;
   width: 100%;
   height: 100%;
 }
 
+:host(.two-tone:not([audio])) {
+  --mux-time-range-padding: 0px; /* px is needed in calc() */
+  --media-preview-thumbnail-border: 0;
+  --media-preview-thumbnail-border-radius: 2px 2px 0 0;
+  --media-preview-time-border-radius: 0 0 2px 2px;
+  --media-preview-time-margin: 0 0 8px;
+  --media-preview-time-text-shadow: none;
+}
+
+:host([audio]) {
+  --media-preview-time-border-radius: 3px;
+  --media-preview-time-margin: 0 0 5px;
+  --media-preview-time-text-shadow: none;
+}
+
+:host(.two-tone:not([audio])) media-time-range {
+  --media-range-track-border-radius: 0;
+}
+
 :host([audio]) ::slotted([slot='media']) {
   height: 0px;
 }
@@ -36,7 +60,8 @@
 media-airplay-button[media-airplay-unavailable],
 media-cast-button[media-cast-unavailable],
 media-volume-range[media-volume-unavailable],
-media-airplay-button[media-airplay-unavailable] {
+media-airplay-button[media-airplay-unavailable],
+media-captions-button:not(:is([media-captions-list], [media-subtitles-list])) {
   display: none;
 }
 
@@ -53,13 +78,26 @@ media-controller {
   height: 100%;
 }
 
+:host media-time-range {
+  color: var(--_primary-color);
+}
+
 :host(:not([audio])) media-time-range {
-  padding: var(--mux-time-range-padding, 0 10px);
-  z-index: 10;
+  --media-range-padding-left: var(--mux-time-range-padding, 10px);
+  --media-range-padding-right: var(--mux-time-range-padding, 10px);
   width: 100%;
-  height: 22px;
-  --media-range-track-translate-y: 6px;
-  background: linear-gradient(180deg, transparent, transparent 15px, var(--media-control-background) 15px);
+  z-index: 10;
+  height: 10px;
+  bottom: -2px;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    transparent 3px,
+    var(--media-control-background) 3px,
+    var(--media-control-background) 8px,
+    transparent 8px,
+    transparent
+  );
 }
 
 media-control-bar {
@@ -70,10 +108,6 @@ media-control-bar :is([role='button'], [role='switch'], button) {
   height: 44px;
 }
 
-media-cast-button {
-  width: 40px;
-}
-
 .size-extra-small media-control-bar [role='button'],
 .size-extra-small media-control-bar [role='switch'] {
   height: auto;

package/src/template.ts

@@ -1,7 +1,12 @@
 import './media-theme-mux/media-theme-mux';
 import './dialog';
-import { getSrcFromPlaybackId, getPosterURLFromPlaybackId, getStoryboardURLFromPlaybackId } from './helpers';
-import { html } from './html';
+import {
+  castThemeName,
+  getSrcFromPlaybackId,
+  getPosterURLFromPlaybackId,
+  getStoryboardURLFromPlaybackId,
+} from './helpers';
+import { html, unsafeStatic } from './html';
 // @ts-ignore
 import cssStr from './styles.css';
 import { i18n, stylePropsToString } from './utils';
@@ -17,18 +22,17 @@ export const template = (props: MuxTemplateProps) => html`
 `;
 
 export const content = (props: MuxTemplateProps) => html`
-  <media-theme-mux
+  <${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}
     audio="${props.audio || false}"
-    style="${stylePropsToString({
-      '--primary-color': props.primaryColor,
-      '--secondary-color': props.secondaryColor,
-      '--mux-time-range-padding': props.secondaryColor ? '0' : null,
-      '--media-range-track-border-radius': props.secondaryColor ? '0' : null,
-    }) ?? false}"
-    class="size-${props.playerSize}"
+    style="${
+      stylePropsToString({
+        '--primary-color': props.primaryColor,
+        '--secondary-color': props.secondaryColor,
+      }) ?? false
+    }"
+    class="size-${props.playerSize}${props.secondaryColor ? ' two-tone' : ''}"
     stream-type="${props.streamType}"
     player-size="${props.playerSize}"
-    has-captions="${props.hasCaptions}"
     default-hidden-captions="${props.defaultHiddenCaptions}"
     forward-seek-offset="${props.forwardSeekOffset}"
     backward-seek-offset="${props.backwardSeekOffset}"
@@ -44,49 +48,57 @@ export const content = (props: MuxTemplateProps) => html`
       debug="${props.debug ?? false}"
       prefer-mse="${props.preferMse ?? false}"
       start-time="${props.startTime != null ? props.startTime : false}"
-      metadata-video-id="${props.metadataVideoId ?? props.metadata?.video_id ?? false}"
-      metadata-video-title="${props.metadataVideoTitle ?? props.metadata?.video_title ?? false}"
-      metadata-viewer-user-id="${props.metadataViewerUserId ?? props.metadata?.viewer_user_id ?? false}"
+      metadata-video-id="${props.metadataVideoId ?? false}"
+      metadata-video-title="${props.metadataVideoTitle ?? false}"
+      metadata-viewer-user-id="${props.metadataViewerUserId ?? false}"
       beacon-collection-domain="${props.beaconCollectionDomain ?? false}"
       player-software-name="${props.playerSoftwareName}"
       player-software-version="${props.playerSoftwareVersion}"
       env-key="${props.envKey ?? false}"
       stream-type="${props.streamType ?? false}"
       custom-domain="${props.customDomain ?? false}"
-      src="${!!props.src
-        ? props.src
-        : props.playbackId
-        ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
-        : false}"
-      poster="${!!props.poster
-        ? props.poster
-        : props.playbackId && !props.audio
-        ? getPosterURLFromPlaybackId(props.playbackId, {
-            domain: props.customDomain,
-            thumbnailTime: props.thumbnailTime ?? props.startTime,
-            token: props.tokens.thumbnail,
-          })
-        : false}"
-      cast-src="${!!props.src
-        ? props.src
-        : props.playbackId
-        ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
-        : false}"
+      src="${
+        !!props.src
+          ? props.src
+          : props.playbackId
+          ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
+          : false
+      }"
+      poster="${
+        !!props.poster
+          ? props.poster
+          : props.playbackId && !props.audio
+          ? getPosterURLFromPlaybackId(props.playbackId, {
+              domain: props.customDomain,
+              thumbnailTime: props.thumbnailTime ?? props.startTime,
+              token: props.tokens.thumbnail,
+            })
+          : false
+      }"
+      cast-src="${
+        !!props.src
+          ? props.src
+          : props.playbackId
+          ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
+          : false
+      }"
       cast-stream-type="${[StreamTypes.LIVE, StreamTypes.LL_LIVE].includes(props.streamType as any) ? 'live' : false}"
     >
-      ${props.playbackId &&
-      !props.audio &&
-      ![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
-        ? html`<track
-            label="thumbnails"
-            default
-            kind="metadata"
-            src="${getStoryboardURLFromPlaybackId(props.playbackId, {
-              domain: props.customDomain,
-              token: props.tokens.storyboard,
-            })}"
-          />`
-        : html``}
+      ${
+        props.playbackId &&
+        !props.audio &&
+        ![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
+          ? html`<track
+              label="thumbnails"
+              default
+              kind="metadata"
+              src="${getStoryboardURLFromPlaybackId(props.playbackId, {
+                domain: props.customDomain,
+                token: props.tokens.storyboard,
+              })}"
+            />`
+          : html``
+      }
     </mux-video>
     <button
       slot="seek-to-live-button"
@@ -111,16 +123,18 @@ export const content = (props: MuxTemplateProps) => html`
       ${props.dialog?.title ? html`<h3>${props.dialog.title}</h3>` : html``}
       <p>
         ${props.dialog?.message}
-        ${props.dialog?.linkUrl
-          ? html`<a
-              href="${props.dialog.linkUrl}"
-              target="_blank"
-              rel="external noopener"
-              aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
-              >${props.dialog.linkText ?? props.dialog.linkUrl}</a
-            >`
-          : html``}
+        ${
+          props.dialog?.linkUrl
+            ? html`<a
+                href="${props.dialog.linkUrl}"
+                target="_blank"
+                rel="external noopener"
+                aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
+                >${props.dialog.linkText ?? props.dialog.linkUrl}</a
+              >`
+            : html``
+        }
       </p>
     </mxp-dialog>
-  </media-theme-mux>
+  </${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}>
 `;

package/src/types.d.ts

@@ -6,11 +6,9 @@ export type MuxPlayerProps = Partial<MuxVideoElement> & {
 
 export type MuxTemplateProps = Partial<MuxPlayerProps> & {
   audio: boolean;
+  theme?: string;
   playerSize: string;
   showLoading: boolean;
-  hasCaptions: boolean;
-  supportsAirPlay: boolean;
-  supportsVolume: boolean;
   thumbnailTime: number;
   primaryColor: string;
   secondaryColor: string;

package/src/video-api.ts

@@ -1,6 +1,7 @@
 import { VideoEvents } from '@mux/mux-video';
 import type MuxVideoElement from '@mux/mux-video';
 import * as logger from './logger';
+import { toNumberOrUndefined } from './utils';
 
 export type CastOptions = {
   receiverApplicationId: string;
@@ -99,6 +100,7 @@ class VideoApiElement extends HTMLElement {
       case CustomVideoAttributes.MUTED: {
         if (this.media) {
           this.media.muted = newValue != null;
+          this.media.defaultMuted = newValue != null;
         }
         return;
       }
@@ -113,6 +115,7 @@ class VideoApiElement extends HTMLElement {
         const val = +newValue;
         if (this.media && !Number.isNaN(val)) {
           this.media.playbackRate = val;
+          this.media.defaultPlaybackRate = val;
         }
         return;
       }
@@ -217,6 +220,19 @@ class VideoApiElement extends HTMLElement {
     }
   }
 
+  get defaultPlaybackRate() {
+    return toNumberOrUndefined(this.getAttribute(CustomVideoAttributes.PLAYBACKRATE)) ?? 1;
+  }
+
+  set defaultPlaybackRate(val) {
+    if (val != null) {
+      this.setAttribute(CustomVideoAttributes.PLAYBACKRATE, `${val}`);
+    } else {
+      // Remove boolean attribute if false, 0, '', null, undefined.
+      this.removeAttribute(CustomVideoAttributes.PLAYBACKRATE);
+    }
+  }
+
   get crossOrigin() {
     return getVideoAttribute(this, AllowedVideoAttributes.CROSSORIGIN);
   }
@@ -252,10 +268,20 @@ class VideoApiElement extends HTMLElement {
   }
 
   get muted() {
-    return getVideoAttribute(this, AllowedVideoAttributes.MUTED) != null;
+    return this.media?.muted ?? false;
   }
 
   set muted(val) {
+    if (this.media) {
+      this.media.muted = Boolean(val);
+    }
+  }
+
+  get defaultMuted() {
+    return getVideoAttribute(this, AllowedVideoAttributes.MUTED) != null;
+  }
+
+  set defaultMuted(val) {
     if (val) {
       this.setAttribute(AllowedVideoAttributes.MUTED, '');
     } else {

package/test/player.test.js

@@ -283,17 +283,29 @@ describe('<mux-player>', () => {
     assert(muxVideo.muted, 'muxVideo.muted is true');
     assert(nativeVideo.muted, 'nativeVideo.muted is true');
 
+    assert(player.defaultMuted, 'player.defaultMuted is true');
+    assert(muxVideo.defaultMuted, 'muxVideo.defaultMuted is true');
+    assert(nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is true');
+
     player.removeAttribute('muted');
 
     assert(!player.muted, 'player.muted is false');
     assert(!muxVideo.muted, 'muxVideo.muted is false');
     assert(!nativeVideo.muted, 'nativeVideo.muted is false');
 
+    assert(!player.defaultMuted, 'player.defaultMuted is false');
+    assert(!muxVideo.defaultMuted, 'muxVideo.defaultMuted is false');
+    assert(!nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is false');
+
     player.setAttribute('muted', '');
 
     assert(player.muted, 'player.muted is true');
     assert(muxVideo.muted, 'muxVideo.muted is true');
     assert(nativeVideo.muted, 'nativeVideo.muted is true');
+
+    assert(player.defaultMuted, 'player.defaultMuted is true');
+    assert(muxVideo.defaultMuted, 'muxVideo.defaultMuted is true');
+    assert(nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is true');
   });
 
   it('volume attribute behaves like expected', async function () {
@@ -342,6 +354,28 @@ describe('<mux-player>', () => {
     assert.equal(nativeVideo.playbackRate, 0.7, 'nativeVideo.playbackRate is 0.7');
   });
 
+  it('defaultPlaybackRate property behaves like expected', async function () {
+    const player = await fixture(`<mux-player
+      playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
+      stream-type="on-demand"
+    ></mux-player>`);
+
+    assert.equal(player.defaultPlaybackRate, 1);
+
+    const muxVideo = player.media;
+    const nativeVideo = muxVideo.shadowRoot.querySelector('video');
+
+    assert.equal(player.defaultPlaybackRate, 1, 'player.defaultPlaybackRate is 1');
+    assert.equal(muxVideo.defaultPlaybackRate, 1, 'muxVideo.defaultPlaybackRate is 1');
+    assert.equal(nativeVideo.defaultPlaybackRate, 1, 'nativeVideo.defaultPlaybackRate is 1');
+
+    player.defaultPlaybackRate = 0.7;
+
+    assert.equal(player.defaultPlaybackRate, 0.7, 'player.defaultPlaybackRate is 0.7');
+    assert.equal(muxVideo.defaultPlaybackRate, 0.7, 'muxVideo.defaultPlaybackRate is 0.7');
+    assert.equal(nativeVideo.defaultPlaybackRate, 0.7, 'nativeVideo.defaultPlaybackRate is 0.7');
+  });
+
   it("signing tokens generate correct asset URL's", async function () {
     // tokens expire in 10 years
     const player = await fixture(`<mux-player