webにある動画
import * as React from "react";
import {useState, useRef} from 'react';
import { View, StyleSheet, Button } from "react-native";
import { Video, AVPlaybackStatus } from "expo-av";
export default function App() {
const video = useRef(null);
const [status, setStatus] = useState({});
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
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>
);
}
const styles = StyleSheet.create({
container: {
},
video: {
},
});
ローカルファイル
import * as React from "react";
import {useState, useRef} from 'react';
import { View, StyleSheet, Button } from "react-native";
import { Video, AVPlaybackStatus } from "expo-av";
export default function App() {
const video = useRef(null);
const [status, setStatus] = useState({});
return (
<View style={styles.container}>
<Video
ref={video}
style={styles.video}
source={require("./assets/douga.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>
);
}
const styles = StyleSheet.create({
container: {
},
video: {
},
});