Video — Kuito Documentation

Play video in a native surface. Use it for trailers, lessons and media feeds.

Play a streamed trailer with native controls

tsx

import { Video } from 'kuito';

export default function Trailer() {
  return (
    <Video
      src={{ uri: 'https://example.com/trailer/master.m3u8' }}
      height={220}
      controls
      onError={(event) => console.log(event.code, event.message)}
    />
  );
}

Behavior

Set a bounded size and handle onError. controls adds native playback controls. Use videoRef for play, pause and seek commands. Sources and playback features depend on the platform media implementation.

Continue

Read Audio for a complete workflow. See the complete prop reference for types and documented defaults.

Reference

Signatures

(props: NativeViewProps<VideoViewProps, VideoMethods>): KuitoElement

Parameters

Name	Type	Required	Description
`props`	`NativeViewProps<VideoViewProps, VideoMethods>`	Yes	—

Returns

KuitoElement

Props: NativeViewProps<VideoViewProps, VideoMethods>

Props (including inherited props) 100

Name	Type	Required	Description
`opacity`	`Animatable<number>`	No	—
`backgroundColor`	`Animatable<string>`	No	—
`borderRadius`	`Animatable<number>`	No	—
`borderColor`	`Animatable<string>`	No	—
`width`	`Animatable<SizeValue>`	No	—
`height`	`Animatable<SizeValue>`	No	—
`translateX`	`Animatable<number>`	No	—
`translateY`	`Animatable<number>`	No	—
`scale`	`Animatable<number>`	No	—
`scaleX`	`Animatable<number>`	No	—
`scaleY`	`Animatable<number>`	No	—
`rotate`	`Animatable<number>`	No	Degrees.
`shadowColor`	`Animatable<string>`	No	—
`shadowRadius`	`Animatable<number>`	No	—
`shadowOffsetX`	`Animatable<number>`	No	—
`shadowOffsetY`	`Animatable<number>`	No	—
`hidden`	`Prop<boolean>`	No	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	No	—
`position`	`Prop<"relative" \| "absolute">`	No	—
`id`	`string`	No	—
`class`	`Prop<ClassNames>`	No	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	No	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`key`	`string \| number`	No	—
`paddingTop`	`Prop<LengthPercentage>`	No	—
`paddingRight`	`Prop<LengthPercentage>`	No	—
`paddingBottom`	`Prop<LengthPercentage>`	No	—
`paddingLeft`	`Prop<LengthPercentage>`	No	—
`minWidth`	`Prop<SizeValue>`	No	—
`maxWidth`	`Prop<SizeValue>`	No	—
`minHeight`	`Prop<SizeValue>`	No	—
`maxHeight`	`Prop<SizeValue>`	No	—
`aspectRatio`	`Prop<number>`	No	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	No	—
`right`	`Prop<LengthPercentageAuto>`	No	—
`bottom`	`Prop<LengthPercentageAuto>`	No	—
`left`	`Prop<LengthPercentageAuto>`	No	—
`margin`	`Prop<LengthPercentageAuto>`	No	—
`marginTop`	`Prop<LengthPercentageAuto>`	No	—
`marginRight`	`Prop<LengthPercentageAuto>`	No	—
`marginBottom`	`Prop<LengthPercentageAuto>`	No	—
`marginLeft`	`Prop<LengthPercentageAuto>`	No	—
`flexGrow`	`Prop<number>`	No	—
`flexShrink`	`Prop<number>`	No	—
`flexBasis`	`Prop<SizeValue \| "content">`	No	—
`flex`	`Prop<number>`	No	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	No	—
`direction`	`Prop<"ltr" \| "rtl">`	No	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	No	—
`paddingInlineStart`	`Prop<LengthPercentage>`	No	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	No	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	No	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	No	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	No	—
`onAction`	`(event: AccessibilityActionEvent) => void`	No	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	No	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	No	What a screen reader says for the view.
`hint`	`Prop<string>`	No	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	No	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	No	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	No	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	No	—
`aria-selected`	`Prop<boolean>`	No	—
`aria-checked`	`Prop<boolean \| "mixed">`	No	—
`aria-busy`	`Prop<boolean>`	No	—
`aria-expanded`	`Prop<boolean>`	No	—
`aria-valuemin`	`Prop<number>`	No	—
`aria-valuemax`	`Prop<number>`	No	—
`aria-valuenow`	`Prop<number>`	No	—
`aria-valuetext`	`Prop<string>`	No	—
`gestures`	`readonly Composable[]`	No	The view's gestures; several race unless composed with together or orElse.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	No	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	No	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	No	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	No	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	No	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	No	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	No	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	No	—
`color`	`Prop<string>`	No	—
`sharedId`	`Prop<string>`	No	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`ref`	`ElementRef<NativeViewHandle<VideoMethods>>`	No	—
`src`	`Bound<VideoSource>`	No	—
`paused`	`Bound<boolean>`	No	False plays once the source loads. `play()` and `pause()` act at once; the prop applies when it changes.
`muted`	`Bound<boolean>`	No	—
`volume`	`Bound<number>`	No	0 to 1.
`rate`	`Bound<number>`	No	Above 0; 1 is normal speed.
`loop`	`Bound<boolean>`	No	—
`objectFit`	`Bound<VideoObjectFit>`	No	`'contain'` by default.
`controls`	`Bound<boolean>`	No	The platform's playback controls over the picture.
`progressInterval`	`Bound<number>`	No	Milliseconds between `onProgress` events while playing; 250 by default, 0 for none.
`onLoad`	`(event: VideoLoadEvent) => void`	No	—
`onProgress`	`(event: VideoProgressEvent) => void`	No	—
`onBuffer`	`(event: VideoBufferEvent) => void`	No	—
`onEnd`	`(event: VideoEndEvent) => void`	No	—
`onError`	`(event: VideoErrorEvent) => void`	No	—
`onPlaybackStateChange`	`(event: VideoPlaybackStateEvent) => void`	No	—
`onFullscreenChange`	`(event: VideoFullscreenEvent) => void`	No	—
`onPictureInPictureChange`	`(event: VideoPictureInPictureEvent) => void`	No	—

onAction — method signatures

Signatures

(event: AccessibilityActionEvent): void

Parameters

Name	Type	Required	Description
`event`	`AccessibilityActionEvent`	Yes	—

Returns

void

backgroundGradient — nested fields

backgroundGradient fields

Name	Type	Required	Description
`angle`	`number`	Yes	—
`colors`	`string[]`	Yes	—

onLoad — method signatures

Signatures

(event: VideoLoadEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoLoadEvent`	Yes	—

Returns

void

onProgress — method signatures

Signatures

(event: VideoProgressEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoProgressEvent`	Yes	—

Returns

void

onBuffer — method signatures

Signatures

(event: VideoBufferEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoBufferEvent`	Yes	—

Returns

void

onEnd — method signatures

Signatures

(event: VideoEndEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoEndEvent`	Yes	—

Returns

void

onError — method signatures

Signatures

(event: VideoErrorEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoErrorEvent`	Yes	—

Returns

void

onPlaybackStateChange — method signatures

Signatures

(event: VideoPlaybackStateEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoPlaybackStateEvent`	Yes	—

Returns

void

onFullscreenChange — method signatures

Signatures

(event: VideoFullscreenEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoFullscreenEvent`	Yes	—

Returns

void

onPictureInPictureChange — method signatures

Signatures

(event: VideoPictureInPictureEvent): void

Parameters

Name	Type	Required	Description
`event`	`VideoPictureInPictureEvent`	Yes	—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.

#Play a streamed trailer with native controls

#Behavior

#Continue

Reference

Signatures

Parameters

Returns

Props (including inherited props) 100

Signatures

Parameters

Returns

backgroundGradient fields

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Play a streamed trailer with native controls

Behavior

Continue