如何为 react-native-video 使用 OS 视频控件?
How to use OS video controls for react-native-video?
有没有什么方法可以使用内置的 iOS/Android 视频控件在 React Native 中播放视频?
例如,这是 iOS
上的样子
我使用 expo-av
库来完成此操作。你也可以在裸项目中使用这个库。 (https://github.com/expo/expo/tree/master/packages/expo-av)
要获取本机视频控件,您需要做的就是传入 useNativeControls
。这里有代码和示例 (https://snack.expo.dev/@heytony01/video)
import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
export default function App() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={{
uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<Button
title={status.isPlaying ? 'Pause' : 'Play'}
onPress={() =>
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
/>
</View>
</View>
);
}
有没有什么方法可以使用内置的 iOS/Android 视频控件在 React Native 中播放视频?
例如,这是 iOS
上的样子我使用 expo-av
库来完成此操作。你也可以在裸项目中使用这个库。 (https://github.com/expo/expo/tree/master/packages/expo-av)
要获取本机视频控件,您需要做的就是传入 useNativeControls
。这里有代码和示例 (https://snack.expo.dev/@heytony01/video)
import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
export default function App() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={{
uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<Button
title={status.isPlaying ? 'Pause' : 'Play'}
onPress={() =>
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
/>
</View>
</View>
);
}