代码之家  ›  专栏  ›  技术社区  ›  dre_84w934

如何同步播放多个世博会av视频?

  •  0
  • dre_84w934  · 技术社区  · 3 年前

    我试着玩2 expo-av 视频同步,我的方法如下。问题是,我尝试过的多个视频不能同时开始,其中一个会更早开始。我能想到的唯一问题是,正如 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 视频无法同步开始。我是否应该检查另一个标志,以确保视频启动没有延迟(这样两个视频就可以同步启动),或者解决这个问题的方法是什么?

    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)}
            />
        );
    
    0 回复  |  直到 3 年前