0

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

本质上，我有一个视频源队列，然后当视频播放完毕后，它会转到队列中的下一个源。但是我收到错误：未捕获（承诺）DOMException：play() 请求被新的加载请求中断。

我知道其他stackoverflows已经说过不要直接修改媒体url，因为它会干扰加载和修改video.src......但这对我来说真的不起作用，因为我没有使用视频标签/源标签/标准 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>
        )
    }
}
4

1 回答 1

0

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

于 2018-06-28T13:25:13.180 回答