0

我正在尝试expo-av同步播放 2 个视频，我的方法如下。问题是我尝试过的多个视频不能同时开始，一个或另一个会更早开始。我能想到的唯一问题是，如docs playbackObject.playAsync(): ... Playback may not start immediately after calling this function for reasons such as buffering. Make sure to update your UI based on the isPlaying and isBuffering properties of the AVPlaybackStatus ...中所述。但是，即使在听isLoaded和isBuffering待时true，false视频也无法同步开始。我应该检查另一个标志以确保视频开始时没有延迟（以便 2 个视频可以同步开始）或者解决这个问题的方法是什么？

import { Video } from 'expo-av';
const videoRef1 = useRef();
const videoRef2 = useRef();

useEffect(() => {
        (async () => {
            try {
                await Promise.all([
                    videoRef1.current.loadAsync(
                        { uri: URL1 },
                        { shouldPlay: true }
                    ),
                    videoRef2.current.loadAsync(
                        { uri: URL2 },
                        { shouldPlay: true }
                    ),
                ]);
            }
            catch (e) {
                console.log(e.message)
            }

        })()
 }, [])

const renderVideoPlayer1 = () => (
        <Video
            ref={videoRef1}
            style={styles.media}
        />
    );

const renderVideoPlayer2 = () => (
        <Video
            ref={videoRef2}
            style={styles.media}
        />
    );

或者我尝试过的另一个实现

import { Video } from 'expo-av';
const videoRef1 = useRef();
const videoRef2 = useRef();
const [isVideo1Ready, setIsVideo1Ready] = useState(false);
const [isVideo2Ready, setIsVideo2Ready] = useState(false);

useEffect(() => {
        (async () => {
            try {
                await Promise.all([
                    videoRef1.current.loadAsync(
                        { uri: URL1 },
                        { shouldPlay: false }
                    ),
                    videoRef2.current.loadAsync(
                        { uri: URL2 },
                        { shouldPlay: false }
                    ),
                ]);
            }
            catch (e) {
                console.log(e.message)
            }

        })()
 }, [])

useEffect(() => {
        if (isVideo1Ready && isVideo2Ready) {
            videoRef1.current.playAsync();
            videoRef2.current.playAsync();
        }
    }, [isVideo1Ready, isVideo2Ready])

const renderVideoPlayer1 = () => (
        <Video
            ref={videoRef1}
            style={styles.media}
            onPlaybackStatusUpdate={(playbackStatus) =>
                playbackStatus.isLoaded
                && !playbackStatus.isBuffering
                && setIsVideo1Ready(true)}

        />
    );

const renderVideoPlayer2 = () => (
        <Video
            ref={videoRef2}
            style={styles.media}
            onPlaybackStatusUpdate={(playbackStatus) =>
                playbackStatus.isLoaded
                && !playbackStatus.isBuffering
                && setIsVideo2Ready(true)}
        />
    );
4

0 回答 0