как обновить источник видео для воспроизведения нового видео - PullRequest
Новая
       31

как обновить источник видео для воспроизведения нового видео

0 голосов
/ 20 сентября 2019

Я пытаюсь обновить свойство src исходного видео html5 для воспроизведения нового видео, выбранного пользователем из списка.Выбранный видеофайл хранится в переменной fileSelected.src меняется каждый раз, когда выбирается новое видео, но проигрыватель html5 продолжает воспроизводить старое видео.Кто-нибудь знает, где я иду не так?Вот соответствующий код: 

function Videos({files,fileSelected}){
    var page =null
    console.log(fileSelected)

    if(!fileSelected && files){
        fileSelected= files[0][0]
        page = <SecondPage files = {files} fileSelected={fileSelected}/> 
    }
    else if(files && fileSelected){
        page = <SecondPage files = {files} fileSelected={fileSelected}/> 
    }else if(!files){
        page = <FirstPage files = {files} fileSelected={fileSelected}/>

    }
    return(page)
}

export default Videos






function FirstPage({files,fileSelected}){
    return(<div> <h2> No Video Uploaded </h2></div>)
}



class SecondPage extends React.Component{

    constructor(props){
        super(props)
    }

    render(){
        const {files, fileSelected}=this.props;
        var src

        return(

                <div>
                    { src = (fileSelected) ? URL.createObjectURL(fileSelected): URL.createObjectURL(files[0][0])}

                    <div className="ui one column centered grid">
                        <div className="one wide column"> {/*needs to be one wide here not just column for center to work*/}
                            <h3>Videos</h3>

                        </div>
                    </div>
                     <div className="ui grid">
                        <div className="ten wide column">
                            <video controls width="566" height="320">
                                    <source src={src} id='video' type="video/mp4" />
                                    Your browser does not support HTML5 video.
                            </video>
                        </div>

                        <div className="six wide column">
                            {files[1]}
                        </div>
                    </div>

                </div>

            )

    }
}

Обратите внимание, что переменная files содержит все видео, которые пользователь может выбрать.

...