import { VideoPlayer } from '@uhg-abyss/mobile/ui/VideoPlayer';

Setup

VideoPlayer requires react-native-video to be installed as a dependency. To start, follow the react-native-video installation directionsopens in a new window.

Basic usage

VideoPlayer can be used with a single source prop. In this configuration it will use the native controls in iOS, and Abyss-specific controls for Android.

VideoPlayer is built around react-native-video, and thus has the ability to consume any prop availableopens in a new window in react-native-video except fullscreen and controls, which are managed by Abyss.

<VideoPlayer source={video} />

Controls

The controls rendered by VideoPlayer differ by platform, and the controls prop is managed by Abyss and cannot be overridden by a consumer:

• Android — Abyss renders its own control overlay: play/pause, skip forward/back, the timeline/seek bar, closed captions, and fullscreen.
• iOS — playback uses the native AVPlayer control bar provided by react-native-video.

The following are not part of the shared VideoPlayer API and are not rendered by Abyss on either platform:

• Mute / volume toggle
• AirPlay / external routing (and TV/cast on Android)
• Playback speed

On iOS, any of these that appear come from the native AVPlayer, not from an Abyss control.

Note

The player height is derived — it is calculated as a 16:9 ratio of the smaller screen dimension and is not configurable. A consumer-supplied height is ignored.

Customization

You can use the thumbnail prop to display a custom thumbnail before the video is started.

<VideoPlayer
  source={video}
  thumbnail={
    <Brandmark size={300} affiliate="uhc" variant="lockup" color="blue" />
  }
/>

Subtitles/CC

Be sure to add closed captions to your video via the textTrack prop.

Closed Captions are required for accessibility. You can provide multiple text tracks, and select the default one using the selectedTextTrack prop.

<VideoPlayer
  source={TestVid}
  videoTitle="Test Video"
  selectedTextTrack={{ type: 'index', value: 0 }}
  textTracks={[
    {
      title: 'english',
      language: 'en',
      uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
    },
  ]}
/>

Accessibility

• Closed Captions is required for all videos.
• Be sure to provide an videoTitle prop to the VideoPlayer component. This will be used as the A11y title for the video.
• It is recommended to provide a text transcript on the same page as the video player.

VideoPlayer Props

Name	Type	Required	A11y	Description
onSubtitlesToggle	((toggled: boolean) => void) | undefined			callback function to be called when subtitles are toggled, returns the subtitles state
thumbnail	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined			custom thumbnail displayed before the video starts
videoTitle	string			The Video's title, this is announced by the screen reader

VideoPlayer Classes

Class Name	Description
abyss-video-player-android-controls-back-button	VideoPlayer android controls skip back button
abyss-video-player-android-controls-back-button-icon	VideoPlayer android controls skip back button icon
abyss-video-player-android-controls-bottom-wrapper	VideoPlayer android controls bottom wrapper (time slider, CC, fullscreen & duration)
abyss-video-player-android-controls-center-wrapper	VideoPlayer android controls center wrapper (skip & play/pause buttons)
abyss-video-player-android-controls-close-button	VideoPlayer android controls close button
abyss-video-player-android-controls-close-button-icon	VideoPlayer android controls close button icon
abyss-video-player-android-controls-duration-current-text	VideoPlayer android controls current time text
abyss-video-player-android-controls-duration-remaining-text	VideoPlayer android controls duration left time wrapper
abyss-video-player-android-controls-forward-button	VideoPlayer android controls skip forward button
abyss-video-player-android-controls-forward-button-icon	VideoPlayer android controls skip forward button
abyss-video-player-android-controls-full-screen-button	VideoPlayer android controls full screen button
abyss-video-player-android-controls-full-screen-button-icon	VideoPlayer android controls full screen button icon
abyss-video-player-android-controls-overlay	VideoPlayer android controls overlay
abyss-video-player-android-controls-pause-button	VideoPlayer android controls play/pause button
abyss-video-player-android-controls-pause-button-icon	VideoPlayer android controls play/pause button icon
abyss-video-player-android-controls-slider-background	VideoPlayer android controls slider background
abyss-video-player-android-controls-slider-foreground	VideoPlayer android controls slider foreground
abyss-video-player-android-controls-slider-thumb	VideoPlayer android controls slider thumb
abyss-video-player-android-controls-subtitle-button	VideoPlayer android controls subtitle button
abyss-video-player-android-controls-subtitle-button-icon	VideoPlayer android controls subtitle button icon
abyss-video-player-android-controls-time-wrapper	VideoPlayer android controls duration time wrapper
abyss-video-player-duration-text	VideoPlayer duration text
abyss-video-player-duration-wrapper	VideoPlayer duration text wrapper
abyss-video-player-full-screen-wrapper	Wrapper for the full screen modal (Modal for android | View for iOS)
abyss-video-player-play-button	VideoPlayer Play button
abyss-video-player-play-button-icon	VideoPlayer Play button icon
abyss-video-player-root	VideoPlayer root
abyss-video-player-thumbnail-custom-wrapper	VideoPlayer custom thumbnail wrapper
abyss-video-player-thumbnail-duration-text	VideoPlayer thumbnail duration text
abyss-video-player-thumbnail-overlay	VideoPlayer thumbnail overlay
abyss-video-player-thumbnail-play-button	VideoPlayer thumbnail play/pause button
abyss-video-player-thumbnail-wrapper	VideoPlayer thumbnail wrapper
abyss-video-player-video	Video component
abyss-video-player-wrapper	Fullscreen wrapper for the video component

Search tokens

Token Name	Value
video-player.color.surface.overlay	rgba(50, 51, 52, .4)