我试着玩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)}
/>
);