VideoPlayer
The VideoPlayer view integrates a powerful AVPlayer backend with a simple, customizable front-end UI for playing video and audio content. With this setup, you can easily load media, control playback, handle events, and even add custom overlays.
Overview
VideoPlayer requires an AVPlayer instance, which you configure to load your media, control its playback (play, pause, stop), and respond to events like when the video is ready or ends. The overlay prop allows you to place interactive UI elements over the video content, below any system playback controls.
Key points:
- Control playback through the
AVPlayer instance passed into VideoPlayer.
- Add custom UI elements on top of the video using
overlay.
- Listen for events like
onReadyToPlay, onEnded, or onError to react to media lifecycle states.
Basic Usage
First, create and configure the AVPlayer instance:
1const player = new AVPlayer()
2
3// Set the media source: local file path or remote URL
4player.setSource("https://example.com/video.mp4")
5
6// When the media is ready, start playing
7player.onReadyToPlay = () => {
8 console.log("Media is ready, starting playback.")
9 player.play()
10}
11
12// Handle playback state changes
13player.onTimeControlStatusChanged = (status) => {
14 console.log("Playback status changed:", status)
15}
16
17// Handle the end of playback
18player.onEnded = () => {
19 console.log("Playback ended.")
20}
21
22// Handle errors
23player.onError = (message) => {
24 console.error("Playback error:", message)
25}
26
27// Configure playback properties
28player.volume = 1.0 // Full volume
29player.rate = 1.0 // Normal speed
30player.numberOfLoops = 0 // No looping
Then, use the VideoPlayer view in your UI:
1<VideoPlayer
2 player={player}
3 overlay={
4 <HStack padding>
5 <Button title="Pause" action={() => player.pause()} />
6 <Button title="Play" action={() => player.play()} />
7 </HStack>
8 }
9/>
This displays the video with your custom controls positioned at the bottom-left corner.
Example Scenario
Imagine you want a video with custom controls and automatic replay:
1function VideoPlayerView() {
2 const player = useMemo(() => new AVPlayer(), [])
3
4 useEffect(() => {
5 player.setSource(
6 Path.join(
7 Script.directory,
8 "localvideo.mp4"
9 )
10 )
11 player.onReadyToPlay = () => player.play()
12 player.onEnded = () => player.play() // Restart video automatically when ended
13
14
15 // Setup shared audio session.
16 SharedAudioSession.setActive(true)
17 SharedAudioSession.setCategory(
18 'playback',
19 ['mixWithOthers']
20 )
21
22 return () => {
23 // Dispose the AVPlayer instance when the view to be destroied.
24 player.dispose()
25 }
26 }, [])
27
28 return <VideoPlayer
29 player={player}
30 overlay={
31 <HStack padding>
32 <Button title="Pause" action={() => player.pause()} />
33 <Button title="Resume" action={() => player.play()} />
34 </HStack>
35 }
36 frame={{
37 height: 300
38 }}
39 />
40}
This setup:
- Loads and plays a local video file immediately when ready.
- Automatically replays the video once it ends.
- Provides custom pause/resume controls overlaid on the bottom-right corner.
Summary
The VideoPlayer component, powered by an AVPlayer instance, gives you fine-grained control over video playback in your app. From adjusting volume and playback speed to handling buffering states and errors, and even layering your own UI controls over the video, the VideoPlayer component and AVPlayer class allow for a rich and interactive media experience.
