fix(video-player): correct a visual regression with background video in some contexts

[m4olivei]

Related Ticket(s)

Closes # {{Provide issue number link(s) to the related ticket(s) that this pull request addresses}}

Description

Recent changes caused visual regressions due to styles that relied on [background-video="true"]. These updates make background-video a pure boolean attribute and simplify the style selectors accordingly.

Changelog

Changed

• Make background-video a reflected boolean attribute all the time.
• Fix a regression with auto-play video.

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/12081/index.html

Built with commit: 5fc572f5b8c2781e6ff8931ebdd60a8f433a2f44

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/index.html

Built with commit: 5fc572f5b8c2781e6ff8931ebdd60a8f433a2f44

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/index.html

Built with commit: 5fc572f5b8c2781e6ff8931ebdd60a8f433a2f44

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/index.html

Built with commit: 5fc572f5b8c2781e6ff8931ebdd60a8f433a2f44

[ibmdotcom-bot]

Deploy preview created for package IBM.com Web Components Deploy Preview CDN:
https://ibmdotcom-cdn.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/index.html

Built with commit: 5fc572f5b8c2781e6ff8931ebdd60a8f433a2f44

[andy-blum]

The leadspace with video isn't playing the video on page load. If I click pause & play again, it will play, but it won't play on load.

https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/iframe.html?args=&id=components-lead-space--super-with-video&viewMode=story

[andy-blum]

Also seems like inline videos need to be clicked on twice to start the video?

https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/iframe.html?args=&id=components-lead-space-block--with-video&viewMode=story

[m4olivei]

The leadspace with video isn't playing the video on page load. If I click pause & play again, it will play, but it won't play on load.

https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/iframe.html?args=&id=components-lead-space--super-with-video&viewMode=story

Also seems like inline videos need to be clicked on twice to start the video?

https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12081/iframe.html?args=&id=components-lead-space-block--with-video&viewMode=story

On my local I needed to go back to the v1.64.0 tag (@carbon/[email protected] ) for this to be working again. Looks like it regressed with #12070

[andy-blum]

The current video-player suite order of operations

video-player

• renders thumbnail overlay OR slot, based on several factors
  • Added !this.autoplay in the last PR. This was necessary to cause the iframe to render on load rather than the thumbnail

    return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL &&
      !backgroundMode &&
      !this.autoplay
      ? html`
          <div class="${prefix}--video-player__video">
            <button
              class="${prefix}--video-player__image-overlay"
              @click="${this._handleClickOverlay}">
              <dds-image default-src="${thumbnailUrl}" alt="${ifNonNull(name)}">
                ${PlayVideo({ slot: 'icon' })}
              </dds-image>
            </button>
          </div>
        `
      : html` <slot></slot> `;

• click button
• dispatch event

    new CustomEvent(`dds-video-player-content-state-changed`, {
      bubbles: true,
      composed: true,
      detail: {
        videoId,
        contentState: VIDEO_PLAYER_CONTENT_STATE.VIDEO,
        playingMode: this.playingMode,
        name,
        customVideoDescription,
      },
    })

video-player-composite

• catch event, call this._embedMedia

    protected _handleContentStateChange(event: CustomEvent) {
      const { contentState, playingMode, videoId } = event.detail;
      if (
        contentState === VIDEO_PLAYER_CONTENT_STATE.VIDEO &&
        playingMode === VIDEO_PLAYER_PLAYING_MODE.INLINE &&
        videoId
      ) {
        this._embedMedia?.(videoId, this.backgroundMode);
      }
    }

video-player-contaienr

• defines _embedMedia

  • calls this._embedVideoImpl

      const embedVideoHandle = await KalturaPlayerAPI.embedMedia(
        videoId,
        playerId,
        this._getPlayerOptions()
      );

  • calls this._getPlayerOptions()

      if (backgroundMode) {
        playerOptions = {
          'topBarContainer.plugin': false,
          'controlBarContainer.plugin': false,
          'largePlayBtn.plugin': false,
          'loadingSpinner.plugin': false,
          'unMuteOverlayButton.plugin': false,
          'EmbedPlayer.DisableVideoTagSupport': false,
          loop: true,
          autoMute: true,
          autoPlay: autoplayPreference,
          // Turn off CTA's including mid-roll card and end cards.
          'ibm.callToActions': false,
          // Turn off captions display, background/ambient videos have no
          // audio.
          closedCaptions: {
            plugin: false,
          },
        };
      } else {
        playerOptions = {
          autoMute: muted,
          // autoPlay: autoplayPreference,
        };
      }

    These override the default flashvars:

      const defaultFlashVars = {
        autoPlay: true,
        closedCaptions: {
          plugin: true,
        },
        titleLabel: {
          plugin: true,
          align: 'left',
          text: '{mediaProxy.entry.name}',
        },
        ibm: {
          template: 'idl',
        },
      };

    • Setting autoPlay: autoplayPreference overrides the default values in the Kaltura API. autoplay there is set to true so that injected iframes play immediately. This has been removed in the latest commit

[andy-blum]

This does cause an accessibility issue - Since we don't override autoPlay on non-BG videos, it's always true even when prefers-reduced-motion is true. We need to find a way to check autoplayPreference for videos with the auto-play attribute but not for videos that load the thumbnail first as a user has to interact with that video first and we don't want to make them click "play" twice.

[andy-blum]

Should be fixed now. We need to make sure the below behaviors are all exhibited:

• Videos that load behind a thumbnail first should play after the overlay is clicked
• Videos that are background-mode should autoplay, muted, with no Kaltura API
  • autoplay should be overridable by user's OS preference or by pausing a background video in the UI
• Videos that are autoplay should autoplay on page load
  • autoplay should be overridable by user's OS preference or by pausing a background video in the UI
• videos that are muted should load as muted (regardless of loading method)

[m4olivei]

Couple things to note. Otherwise, nice work sleuthing the bug. I don't find any issues.

[m4olivei]

✅ This is looking good to me now. Testing in Storybook looks good. I've also used the CDN preview together with Requestly to test issues reported with needing two clicks to play at this link as well as background visual regression at this link.