Question

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

基本上我有一个视频源队列，然后当视频完成播放时，它会进入队列中的下一个源。但是我收到错误：未捕获（在promise中）DOMException：play（）请求被新的加载请求中断。

据我所知，其他stackoverflow已经表示不会直接修改媒体网址，因为它会干扰加载和修改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>
        )
    }
}

Answer 1

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

无法从React设置视频来源？

1 个答案: