I am using the expo-av library for display video in application. As per requirements, I implement the auto play and pause video is visible on screen. So that time am using this solution.
npm i @coffeebeanslabs/react-native-inviewport
Everything is fine but when video is autoplay in visible on screen so that time user can't pause.
Here is my code:
PostVideo.js
import * as React from "react";
import { View, StyleSheet, Button, Dimensions } from "react-native";
import { Video, AVPlaybackStatus } from "expo-av";
import InViewPort from './InViewPort';
const WIDTH = Dimensions.get("window").width;
export default function FeedVideo(props) {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
const pauseVideo = () => {
if (video) {
video.current.pauseAsync();
}
}
const playVideo = () => {
if (video) {
video.current.playAsync();
}
}
const handlePlaying = (isVisible) => {
isVisible ? playVideo() : pauseVideo();
}
return (
<View>
<InViewPort onChange={handlePlaying}>
<Video
ref={video}
style={styles.video}
source={{
uri: props.feedVideo,
}}
useNativeControls
resizeMode="contain"
isLooping
shouldPlay = {false}
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
></Video>
</InViewPort>
</View>
);
}
const styles = StyleSheet.create({
video: {
width: WIDTH - 60,
alignSelf: "center",
height: 248,
borderRadius: 14,
marginTop: 12,
},
buttons: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
});
handlePlaying function is decided to play or pause video, So problem is when video view is visible on screen to that time video is continue playing and user can't stop.
here is video to show problem.
Here, ViewPort is another component and uses this component is visible view.
So, How to pause the autoplay video.
Thanks
