Expo-AV Video - Video controller doesn't show when video is tapped

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
1 Like

Did you find solution?