Question

视频链接的类型为mp4，当我提到源中视频的静态链接时，它的视频播放效果很好，但是当从数据库中动态获取视频链接时，视频无法播放，反应会引发错误，例如这个...

VIDEOJS：错误：（代码：4 MEDIA_ERR_SRC_NOT_SUPPORTED）找不到与此媒体兼容的源。

有人可以帮助我吗？

componentDidMount = () => {
    this.getvideobyid()
}

async getvideobyid() {
    try{
        const response = await 
        axios.get('http://localhost:8080/get_videos/2');
        this.setState({
        video_url: response.data.video_list[0].url_for_video 
        })
        }
    catch(error){
            console.log('eror while fetching.....', error)
    }
}

render() {
    const videoJsOptions = {
          width: 720,
          height: 300,
          controls: true,
          sources: [{
               src: this.state.video_url,
               type: 'video/mp4',
               },
            ]
      };
    return (
      <div>
          <VideoPlayer 
          {...videoJsOptions}
          />
      </div>
    )
}



export default class VideoPlayer extends React.Component {
    componentDidMount() {
    this.player = videojs(this.videoNode, this.props, function 
    onPlayerReady() {
        console.log('onPlayerReady', this)
    });
  }

componentWillUnmount() {
    if (this.player) {
    this.player.dispose()
}
}

componentWillReceiveProps(newProps) {
    if (this.player) {
    this.player.src({
    type: 'video/mp4',
    src: newProps.video_url
    });
   } 
}

render() {
    console.log('what render is there in node......', this.props)
        return (
            <div>    
                <div data-vjs-player>
                <video ref={ node => this.videoNode = node } 
                className="video-js">      
                </video>
            </div>
            </div>
            )
      }
}

更新代码。如您所见，对于一个源，我已经给出了静态链接，现在正在评论它，它正在播放，但是另一个源是动态地来自DB，并且我已经设置了状态。它没有播放。我希望当链接来自数据库时播放该视频。

Answer 1

我自己解决了，通过将isVideo的boolean设置为false，当在componentDidmount中调用Api时，我将isVideo设置为true

this.state= {
isVideo : false,
video_url:''
}

正在播放reactjs中videojs的静态视频URL，但不是动态来自数据库的URL

1 个答案: