英文:
Expo AV: 'if' video has finished, go back to start
问题
我正在尝试在Expo AV中创建一个函数，其中如果视频播放完成，它会自动返回到开头。我创建的restart()函数不允许这样做。请原谅我，因为我对这不太熟悉！这是我的代码：
export default function App() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
const restart = () => {
if (video.status.didJustFinish) {
video.current.playFromPositionAsync(0);
}
};
restart();
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={require("./assets/big_buck_bunny.mp4")}
useNativeControls={false}
volume={1.0}
resizeMode={ResizeMode.CONTAIN}
isLooping={false}
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<TouchableOpacity onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()}>
{status.isPlaying ? (
<>
<AntDesign style={styles.icons} name="pause" size={50} color="white" />
</>
) : (
<>
<AntDesign style={styles.icons} name="play" size={50} color="white" />
</>
)}
</TouchableOpacity>
</View>
</View>
);
}
希望这可以帮助你解决问题！
英文:
I am trying to create a function in Expo AV where 'if' the video has finished playing, it automatically returns to the start. The restart() function that I created does not allow this. Please excuse me as I am quite new to this! This is my code:
export default function App() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
const restart = () => {
if (video.status.didJustFinish) {
video.current.playFromPositionAsync(0);
}
};
restart();
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={require("./assets/big_buck_bunny.mp4")}
useNativeControls={false}
volume={1.0}
resizeMode={ResizeMode.CONTAIN}
isLooping={false}
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<TouchableOpacity onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()}>
{status.isPlaying ? (
<>
<AntDesign style={styles.icons} name="pause" size={50} color="white" />
</>
) : (
<>
<AntDesign style={styles.icons} name="play" size={50} color="white" />
</>
)}
</TouchableOpacity>
</View>
</View >
);
}
答案1
得分: 1
将您的 restart 函数的逻辑封装在一个 useEffect 钩子中，并将 status 添加为要观察的依赖项。每当 status 发生变化时，效果将运行，并且如果 didJustFinish 为 true，则会从头开始播放视频。
export default function App() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
useEffect(() => {
if (status?.didJustFinish) {
video.current.playFromPositionAsync(0);
}
}, [status]);
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={require("./assets/big_buck_bunny.mp4")}
useNativeControls={false}
volume={1.0}
resizeMode={ResizeMode.CONTAIN}
isLooping={false}
onPlaybackStatusUpdate={status => setStatus(status)}
/>
<View style={styles.buttons}>
<TouchableOpacity onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()}>
{status.isPlaying ? (
<>
<AntDesign style={styles.icons} name="pause" size={50} color="white" />
</>
) : (
<>
<AntDesign style={styles.icons} name="play" size={50} color="white" />
</>
)}
</TouchableOpacity>
</View>
</View>
);
}
英文:
Wrap the logic of your restart function in a useEffect hook and add status as the dependency to observe. Whenever status changes, the effect will run and start the video from the start if didJustFinish is true.
export default function App() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
useEffect(() => {
if (status?.didJustFinish) {
video.current.playFromPositionAsync(0);
}
}, [status]);
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={require("./assets/big_buck_bunny.mp4")}
useNativeControls={false}
volume={1.0}
resizeMode={ResizeMode.CONTAIN}
isLooping={false}
onPlaybackStatusUpdate={status => setStatus(status)}
/>
<View style={styles.buttons}>
<TouchableOpacity onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()}>
{status.isPlaying ? (
<>
<AntDesign style={styles.icons} name="pause" size={50} color="white" />
</>
) : (
<>
<AntDesign style={styles.icons} name="play" size={50} color="white" />
</>
)}
</TouchableOpacity>
</View>
</View >
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论