html - How can I seemlessly play multiple videos in loop with react? - Stack Overflow

admin管理员组

文章数量:1122846

I use the following code to play multiple videos in series

import React, { useState ,useEffect,useRef} from 'react'

export function VideoPlayer({playlist}) {

    const [currentlyPlaying, setCurrentlyPlaying] = useState(playlist[0]);


    const player=useRef(null);
    const playNext=()=>{
        let currentIndex=playlist.indexOf(currentlyPlaying);
        if(currentIndex<playlist.length-1){
            setCurrentlyPlaying(playlist[currentIndex+1]);
        }
        else{
            setCurrentlyPlaying(playlist[0]);
        }
        //reset the player
        player.current.load();

    }


    return (
        <div>
            <video width="320" height="240" controls ref={player} autoPlay onEnded={playNext} ref={player}>

                <source src={currentlyPlaying} type="video/mp4"/>
                Your browser does not support the video tag.
            </video>
        </div>
    )


}

It works decent on desktop but on mobile it refreshes the controls each time, making it look awkawrd (the videos are only a few seconds long)

Is there a more seamless way to play video in series?

本文标签： htmlHow can I seemlessly play multiple videos in loop with reactStack Overflow