无法从 React 设置视频源？

Question

我正在尝试动态更新视频组件的来源，我正在使用视频播放器包 React-player（请参阅：https://www.npmjs.com/package/react-player）来使用 Wistia 视频嵌入，因为 Wistia 依赖于脚本标签/ React 本身不能很好地工作。

基本上我有一个视频源队列，然后当视频播放完毕后，它会转到队列中的下一个源。但是我收到错误： Uncaught (in promise) DOMException: play() 请求被新的加载请求中断。

我知道其他 stackoverflows 已经说过不要直接修改媒体 url，因为它会干扰加载和修改 video.src ......但这对我来说真的不起作用，因为我没有使用视频标签/source 标签/标准 html5 播放器

这是我的代码：

  class Videoplayer extends Component {
    constructor(props){
        super(props);
        this.state = {
            queue: ['https://home.wistia.com/medias/fi4s9gfe9']
        }
    }

    componentWillMount(){
        fetch("https://api.wistia.com/v1/medias.json?api_password="+apikey).then((res)=>{
            res.json().then((data)=>{
                let hashedqueue = [];
                data.forEach((vid)=>hashedqueue.push('https://home.wistia.com/medias/'+vid.hashed_id));
                this.setState({
                    queue: hashedqueue
                })          
            })
        })
    } 
  finishedPlaying() {
        this.player.playing = false;
        this.setState(prevState => {
          // make a shallow copy so as not to mutate state
          const videos = [...prevState.queue];
          videos.shift();
          return { queue: videos };
        });         
  }
    render(){   
        return(
        <div className="videoplayer">
            <ReactPlayer ref={player => { this.player = player }} onEnded={()=>this.finishedPlaying()}  url={this.state.queue[0]} playing />
        </div>
        )
    }
}

Answer 1

在 ReactPlayer 中使用 getInternalPlayer() 获取视频标签，更多功能可以在here阅读