Media
Video Player
The video player component allows a user to play and control video content.
The NewsKit video player component wraps the underlying Brightcove player that can be themed, by using NewsKit design tokens.
Anatomy
In order to allow NewsKit consumers to display video content, the component is built on top of Brightcove’s video player.
The subcomponents listed below can be enabled in the Brightcove config file passed to the video player component:
| Item | Name | Description | Component | Optional |
|---|
Layout examples
Default player
The following example shows the default video player layout option that can be assembled using the various available subcomponents of the Brightcove player. View the example in Storybook.
Player in card
The video player can be used with other components to create more complex modules, such as a card to give context to the video being played. View the examples in Storybook.
Code examples can be viewed in Storybook via the ‘Story’ tab in the addons panel.
For full details of all available Brightcove player subcomponents, and their respective options and behaviours, refer to the Brightcove documentation, and the playerx GitHub repo.
NewsKit allows users to customise the styling of the subcomponents of the Brightcove player, using NewsKit design tokens
Refer to the Step-by-Step: Player Customization guide from Brightcove for details.
Accessibility considerations
The video player component meets the standards set out in the WCAG 2.1 AA accessibility guidelines.
Refer to the Brightcove Player accessibility features for more information.
API
The video player requires a config prop that can be used to define an appropriate experience for different use cases. This will then be passed to the underlying Brightcove player .
| Name | Type | Default | Description | Required |
|---|