components
Video
v.1.0.0 | SaturnUsage
import { Video } from '@kubit-ui-web/react-components'
12345678910
<Video
variant='REGULAR'
videoSrc='/src/assets/storybook/videos/mov_bbb.mp4'
videoType='video/mp4'
buttonsBarPlayIcon={{ icon: 'ICON_CHEVRON_UP', altText: 'play icon alt text' }}
buttonsBarPlayIconTooltip='play/stop'
buttonsBarVolumeIcon={{ icon: 'ICON_CHEVRON_DOWN', altText: 'volume alt text' }}
buttonsBarVolumeIconTooltip='Volume'
buttonsBarSubtitlesIcon={{ icon: 'ICON_GHOST', altText: 'subtitles icon alt text' }}
buttonsBarSubtitlesIconTooltip='Subtitles'Props
Let's delve into the versatility of the video component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
| actionButton | VideoButtonType | - | Object with action button properties |
| autoFullScreen | Boolean | false | Boolean to decide if the video should be fullscreen automatically after play |
| barAriaLabel | String | - | Aria label for progress bar |
buttonsBarFullScreenIcon Required | IElementOrIcon | - | Select the icon to show the full screen button |
buttonsBarFullScreenIconTooltip Required | String | - | Text for the tooltip of fullscreen button |
| buttonsBarFullScreenIconToTransition | IElementOrIcon | - | Select the icon to show the full screen button to transition |
buttonsBarPlayIcon Required | IElementOrIcon | - | Select the icon to show the play button |
buttonsBarPlayIconTooltip Required | String | - | Text for the tooltip of play/stop button |
| buttonsBarPlayIconToTransition | IElementOrIcon | - | Select the icon to show icon to transition |
buttonsBarSubtitlesIcon Required | IElementOrIcon | - | Select the icon to show the subtitles button |
buttonsBarSubtitlesIconTooltip Required | String | - | Text for the tooltip of subtitles button |
| buttonsBarSubtitlesIconToTransition | IElementOrIcon | - | Select the icon to show the subtitles button to transition |
buttonsBarVolumeIcon Required | IElementOrIcon | - | Select the icon to show the volume button |
buttonsBarVolumeIconTooltip Required | String | - | Text for the tooltip of volume button |
| buttonsBarVolumeIconToTransition | IElementOrIcon | - | Select the icon to show icon to transition |
| dataTestIdOverlay | String | - | Test id associated to overlay for testing |
| dataTestIdParentContainer | String | - | Test id associated to parent container for testing |
| dataTestIdVideoSkeleton | String | - | Test id associated to skeleton of the video for testing |
| dataTestIdVolumeInput | String | - | Test id associated to volume input for testing |
| hasInitialOverlay | Boolean | false | Boolean to show or not the overlay initially |
| hasSkeleton | Boolean | - | Boolean to show or not the skeleton |
| linkAndActionButtonAlignment | LinkAndActionButtonAlignment | flex-end | Set the alignment of the Link and Action button |
| linkTarget | LinkTargetType | _blank | Set the link target |
| linkText | String | - | Text for link |
| linkUrl | String | - | Url for link |
| posterUrl | String | - | Url image for poster in video |
| screenLoadingIcon | IElementOrIcon | - | Select the icon to show screen loading icon |
| screenPlayIcon | IElementOrIcon | - | Select the icon to show screen play icon |
| skeletonText | String | - | Text for screenReader when skeleton is shown |
| timeToHideButtonsBar | Number | 4000 | Time in miliseconds to hide buttons bar |
| trackKind | String | - | Specifies the kind of text track |
| trackLabel | String | - | Specifies the title of the text track |
| trackSrc | String | - | Specifies the URL of the track file |
| trackSrcLang | String | - | Specifies the language of the track text data (required if kind="subtitles") |
| volumeBarAriaLabel | String | - | Aria label for inputRange |
videoType Required | String | - | Type of video |
videoSrc Required | String | - | Source of the Video |
variant Required | String | - | Current variant of Video |
| onCanPlay | React.ReactEventHandler<HTMLVideoElement> | - | Function called when the video is ready to play |
| onChangeVolume | React.MouseEventHandler<HTMLButtonElement> | - | Function called when user changes volume using the input range |
| onClickFullScreen | (event: React.MouseEvent<HTMLButtonElement>, activated: boolean) => void | - | Function called when user click on the full screen button |
| onClickSubtitles | (event: React.MouseEvent<HTMLButtonElement>, activated: boolean) => void | - | Function called when user click on the subtitles button |
| onClickVolumeButton | (event: React.MouseEvent<HTMLButtonElement>, valume: string) => void | - | Function called when user click on the volume button |
| onLoadedMetadata | React.MouseEventHandler<HTMLButtonElement> | - | Function called when the video loads its metadata |
| onVideoPause | React.ReactEventHandler<HTMLVideoElement> | - | Function called when the video pauses |
| onVideoPlay | React.ReactEventHandler<HTMLVideoElement> | - | Function called when the video plays |
| onTimeUpdate | React.ReactEventHandler<HTMLVideoElement> | - | Function called when video time changes |
| onTogglePlay | ( event: React.MouseEvent<HTMLVideoElement | HTMLButtonElement, MouseEvent>, isPlaying: boolean ) => void | - |
| onClickLink | React.MouseEventHandler<HTMLElement> | - | Function called when user click on the link |
| onVideoPause | React.ReactEventHandler<HTMLVideoElement> | - | Function called when the video pauses |
| ctv | Object | - | Object used for update variant styles |