Using the Player component

The Player component now has its route. So you can use it with the view if you want to render it full screen. You can add it to a custom view, but it should not be fullscreen.

How to get the TV (XDK) Player reference

The current Player used the XDK Player as TVPlayer from the @accedo/vdkweb-tv-player. Combining this with the @accedo/vdkweb-player you can get the XDK Player reference by using the onVideoDidMount from the vdkweb-player and using the reference there to:

1. save it for later usage
2. get the Video player

  <UniversalPlayer
    ...
    onVideoDidMount={onVideoDidMount}
    ...
  >

  const onVideoDidMount = videoRef => {
    ...
    // videoRef.getVideo() will get the XDK media instance
    // and we are allowed to use XDK native functions
    const mediaInstance = tvVideoRef.getVideo();
    xdkVideoRef.current = mediaInstance;
    ...
  };

View usage

  historyPush({
    path: '/player',
    state: {
      videoUrl: asset.videoUrl,
      asset,
      isTrailer,
      theme
    }
  });

Just push to the /player route and do not forget to pass the needed parameters.

How to define a custom video size

After following the steps of the "How to get the TV (XDK) Player reference" section, you can use any XDK video player method. In order to define a custom video size or resize the current one, you can use setVideoSizeAndPosition as defined in XDK Player JSDoc

How to add media type support

By default, the Player component of Elevate only supports MP4 media. To include multiple format support you have to modify some things.

The Players array is a prop defined in the component is src/components/Player/Player.js. This prop is passed to the UniversalPlayer component of VDK.

const Players = [
  {
    component: TVPlayer,
    supportedMediaTypes: [MediaType.MP4]
  }
];

By default, Elevate uses the VDK TVPlayer component for MP4 videos. You can modify the supportedMediaTypes array, or if you want to add more media types or you can use a different component for each format. It depends on what you decide.

How to add DRM support

By default, there is no DRM support in Elevate. But since XDK already has DRM support and Elevate uses XDK abstractions, you can include the needed information easily if you need it.

You have to modify loadOptions response object to include the DRM options in the utils.js file. src/components/Player/utils.js

const getLoadOptions = () => {
  const playbackOptions = {};
  // TODO to be modified in custom project
  /*
    playbackOptions: {
      drm: "playready", // the DRM type,
      drmURL: "https://licenseserver.playready.com", // the license server url
      subtitle: [
        {
          id - Index of the subtitle track.
          [mimetype] - Mime type of the subtitle. possible values: webvtt|imsc1|srt|sami|ttml
          [language] - Language associated to the subtitle.
          [url] - Mandatory for external subtitles. It should be a full accesible url and not relative.
          [label] - Label to shown on the UI.
        }
      ], // subtitle array configuration for external files
      audioTrack: {} // audio track options. This does not modify the audio tracks of the video
    }
   *
   */
  return playbackOptions;
};

How to add Subtitles into the Player

As described in the previous section, you can modify the loadOptions object from utils.js file. src/components/Player/utils.js in order to pass a proper loadOptions into the Build Player that will be used to pass it to the XDK Player.

const getLoadOptions = () => {
  const playbackOptions = {};
  // TODO to be modified in custom project
  /*
    playbackOptions: {
      subtitle: [
        {
          id - Index of the subtitle track.
          [mimetype] - Mime type of the subtitle. possible values: webvtt|imsc1|srt|sami|ttml
          [language] - Language associated to the subtitle.
          [url] - Mandatory for external subtitles. It should be a full accesible url and not relative.
          [label] - Label to shown on the UI.
        }
      ], // subtitle array configuration for external files
    }
   *
   */
  return playbackOptions;
};

The current implementation already does request the Subtitles from the XDK instance in the getAudioAndSubtitles function (just once).

For the specifics of your project, you may need to request the subtitles to your OVP/API before loading the player in order to get the proper ones or re-render the player once that content is loaded.

How to perform actions on Player back

The Player component accepts a prop called updateParentLatestStateById. If true, the player will update the contextPage with the latestPlayedAsset

This way, you're previous component can read that information.

Player Component
if (updateParentLatestStateById) {
  // update the parent page with new information
  // usefull for beinge watching
  setPageLatestStateById(updateParentLatestStateById, {
    latestPlayedAsset: state.currentAsset
  }); // update context
}

// Previous component
const onBackwardDidMount = useCallback(
  latestState => {
    const lastPlayedAsset = latestState && latestState.latestPlayedAsset;
    getPageData(lastPlayedAsset.id);
  },
  [getPageData]
);

How to enable bookmarks

By default the player set the bookmark when the user is going back from the player.

Optionally you can set an interval (ms) to keep the progress periodically.

const SAVE_BOOKMARK_INTERVAL = false; // 10 * 1000;

The bookmark service is used within the useBookmark hook.

const { saveBookmark, getBookmarkById } = useBookmarks({
  dataRef: assetDataRef,
  isAuthenticated: authContext.isAuthenticated,
  userName
});

Note: By Default, there's a 95% progress limit on the bookmark storage, defined in the useBookmarks hook