我如何更新视频源以播放新视频

Question

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

变量包含用户可以选择的所有视频。
    

当您更改HTML5视频元素的来源时，您还需要告诉元素加载以使其实际上加载新源。

下面的示例是函数而不是基于类并使用钩子的示例，效果很好。它本质上是观察源属性（使用使用效率），然后在源更改时重新加载视频。

const MyVideo = forwardRef( (props, ref) => {
  // This component represents a single video element.
  // It includes a forward ref which means it passes it ref back to its parent
  // so it's partent can use the ref too

  const reloadSource = (newSource) => {
    //Function to reload the video element with a new source
    let vidElement = ref.current;
    if (vidElement) {
      vidElement.load();
    }
  };

  useEffect (reloadSource, [props.source]);

  return(
    <div className="video-wrapper">
        <video className="video-area" controls ref={ref}>
          <source src={props.source} type="video/mp4"/>
          Your browser does not support the video tag.
        </video>
    </div>
  )
});

Answer 1