VideoRef
A Video's ref that also holds its state: signals for what the player is
doing, and time and duration as motion values. Between the player's
reports the UI thread moves time along at the player's rate, so a bound
progress bar needs no onProgress. Called while a component sets up, which
owns it, like ref(), and passed as the view's ref.
Usage
Seek a lesson video back to the beginning.
This type is used by videoRef
// Seek a lesson video back to the beginning.
import { Button, Video, VStack, videoRef } from 'kuito';
export function Lesson() {
const player = videoRef();
return (
<VStack flex={1}>
<Video ref={player} src={{ uri: 'https://example.com/lesson.mp4' }} height={240} controls />
<Button onPress={() => void player.current?.seek(0).catch(console.error)}>
Restart lesson
</Button>
</VStack>
);
}Type declaration
export type VideoRef = ElementRef<VideoHandle> & {
readonly playing: ReadonlySignal<boolean>;
readonly loaded: ReadonlySignal<boolean>;
readonly buffering: ReadonlySignal<boolean>;
readonly fullscreen: ReadonlySignal<boolean>;
readonly pictureInPicture: ReadonlySignal<boolean>;
readonly error: ReadonlySignal<string | null>;
/** Seconds from the start. */
readonly time: Motion<number>;
/** Seconds; 0 until loaded, and for a live stream. */
readonly duration: Motion<number>;
/** Calls `listener` each time playback reaches the end. */
watch(event: 'ended', listener: () => void): EventSubscription;
};Members 10
| Name | Type | Required | Description |
|---|---|---|---|
current | VideoHandle | Yes | — |
playingreadonly | ReadonlySignal<boolean> | Yes | — |
loadedreadonly | ReadonlySignal<boolean> | Yes | — |
bufferingreadonly | ReadonlySignal<boolean> | Yes | — |
fullscreenreadonly | ReadonlySignal<boolean> | Yes | — |
pictureInPicturereadonly | ReadonlySignal<boolean> | Yes | — |
errorreadonly | ReadonlySignal<string> | Yes | — |
timereadonly | Motion<number> | Yes | Seconds from the start. |
durationreadonly | Motion<number> | Yes | Seconds; 0 until loaded, and for a live stream. |
watch | (event: "ended", listener: () => void) => EventSubscription | Yes | Calls listener each time playback reaches the end. |
watch — method signatures
Signatures
(event: "ended", listener: () => void): EventSubscriptionParameters
| Name | Type | Required | Description |
|---|---|---|---|
event | "ended" | Yes | — |
listener | () => void | Yes | — |
Returns
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.