mirror of
https://github.com/zoriya/react-native-video.git
synced 2026-06-07 20:31:58 +00:00
chore: update example
This commit is contained in:
+24
-21
@@ -1,38 +1,41 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Button, Dimensions, Platform, StyleSheet, View } from 'react-native';
|
import { Button, Dimensions, Platform, StyleSheet, View } from 'react-native';
|
||||||
import { VideoView, createPlayer } from 'react-native-video';
|
import { VideoView, createSource, useVideoPlayer } from 'react-native-video';
|
||||||
|
|
||||||
const player = createPlayer('https://www.w3schools.com/html/mov_bbb.mp4');
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [show, setShow] = React.useState(true);
|
const [show, setShow] = React.useState(false);
|
||||||
|
|
||||||
// You can easily access player!
|
const player = useVideoPlayer('https://www.w3schools.com/html/mov_bbb.mp4');
|
||||||
const play = React.useCallback(() => {
|
|
||||||
player.play();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const pause = React.useCallback(() => {
|
|
||||||
player.pause();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const seek = React.useCallback(() => {
|
|
||||||
player.currentTime = 3;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.videoContainer}>
|
<View style={styles.videoContainer}>
|
||||||
<VideoView player={player} style={styles.box} />
|
{/* <VideoView player={player} style={styles.box} /> */}
|
||||||
{/* Two VideoViews with same player are supported not supported on Android */}
|
{/* Two VideoViews with same player are supported not supported on Android */}
|
||||||
{Platform.OS === 'ios' && show && (
|
{show && (
|
||||||
<VideoView player={player} style={styles.box} />
|
<VideoView player={player} style={styles.box} />
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
<Button title="Play" onPress={play} />
|
<Button title="Play" onPress={() => player.play()} />
|
||||||
<Button title="Pause" onPress={pause} />
|
<Button title="Pause" onPress={() => player.pause()} />
|
||||||
<Button title="Seek to 3sec" onPress={seek} />
|
<Button title="Seek to 3sec" onPress={() => player.currentTime = 3} />
|
||||||
<Button title="Toggle" onPress={() => setShow((prev) => !prev)} />
|
<Button title="Toggle" onPress={() => setShow((prev) => !prev)} />
|
||||||
|
<Button title="Preload player" onPress={() => {
|
||||||
|
player.preload().then(() => {
|
||||||
|
// setShow(true);
|
||||||
|
}).catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
}} />
|
||||||
|
<Button title="Replace source" onPress={() => {
|
||||||
|
const newSource = createSource("https://www.w3schools.com/html/mov_bbb.mp4")
|
||||||
|
|
||||||
|
newSource.getAssetInformationAsync().then((assetInfo) => {
|
||||||
|
console.log(assetInfo);
|
||||||
|
})
|
||||||
|
|
||||||
|
player.replaceSourceAsync(newSource);
|
||||||
|
}} />
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user