Tracks playback position and duration. Required by TimeSlider, time display components, and SeekButton.
Import
import { time, selectTime } from '@videojs/react';
// or
import { time, selectTime } from '@videojs/html';
Usage
import { createPlayer, time } from '@videojs/react';
const Player = createPlayer({
features: [time],
});
import { createPlayer, time } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [time],
});
State
Current playback position in seconds.
Total duration of the media in seconds. 0 if unknown.
Whether a seek operation is currently in progress.
Actions
seek(time)
(time: number) => Promise<void>
Seek to a position in seconds. Returns a promise that resolves when seeking is complete.
Selector
Use selectTime to subscribe to only the time slice of state. Returns undefined if the time feature is not configured.
import { selectTime, usePlayer } from '@videojs/react';
function TimeDisplay() {
const time = usePlayer(selectTime);
if (!time) return null;
return (
<span>
{Math.floor(time.currentTime)} / {Math.floor(time.duration)}
</span>
);
}
import { createPlayer, MediaElement, selectTime } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';
const { PlayerController, context } = createPlayer({ features: videoFeatures });
class TimeDisplay extends MediaElement {
readonly #time = new PlayerController(this, context, selectTime);
}
Required by: TimeSlider, CurrentTime, Duration, SeekButton
