Hi all, I just working on making a video playlist player using expo-av. The issue is, the video controller does not appear in several devices. In my own device Android Oreo, it works properly, but it doesn’t in my emulator (Android Lollipop API 22) and my partner phone with a similar Android version. Here is my code:
export default (props) => {
const videoRef = useRef();
const [isVideoFinish, setVideoFinish] = useState(false);
const { selectedLesson } = useSelector(({ courseProps }) => courseProps);
let { content: noSplitVideo, title, timebar, lesson_split } = selectedLesson;
const [lessonIndex, setLessonIndex] = useState(0);
useEffect(() => {
// init video source
(async function () {
if (!lessonIndex && !isVideoFinish) {
const srcUrl = lesson_split.length
? lesson_split[0].video
: noSplitVideo;
const source = { uri: VIDEO_BASE_URL + srcUrl };
await videoRef.current.loadAsync(source, {
useNativeControls: true,
shouldPlay: true,
positionMillis: timebar * 1000,
});
}
})();
if (isVideoFinish) onVideoFinish();
}, [isVideoFinish, videoRef.current]);
const savePlaybackData = (videoData) => {
const { durationMillis, positionMillis } = videoData;
const newVideoState = durationMillis && durationMillis === positionMillis;
if (isVideoFinish !== newVideoState && newVideoState !== undefined) {
setVideoFinish(newVideoState);
}
};
const onVideoReplay = async () => {
await videoRef.current.setStatusAsync({ positionMillis: 0 });
};
const onVideoFinish = async () => {
const nextIndex = lessonIndex + 1;
if (!lesson_split[nextIndex]) return;
const { video } = lesson_split[nextIndex];
setLessonIndex(nextIndex);
const source = { uri: VIDEO_BASE_URL + video };
await videoRef.current.loadAsync(source, {
useNativeControls: true,
shouldPlay: true,
positionMillis: 0,
});
};
return (
<View style={{ alignItems: "center", padding: 0 }}>
<Video
ref={videoRef}
useNativeControls
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode={Video.RESIZE_MODE_CONTAIN}
onPlaybackStatusUpdate={savePlaybackData}
/>
</View>
);
};
The other way to execute I’ve done is to initialize the loadAsync
process inside the ref
function just like this reference playlist-example/App.js at master · expo/playlist-example · GitHub, but it did not give me any different result. I really appreciate all of you who have a willingness to put your effort to discuss more this issue. Thanks a bunch!
I am using:
- Expo SDK 38
- expo-av 8.2.1