在浏览器中上载和播放视频ReactJS

时间:2018-08-14 09:45:20

标签: reactjs html5-video

我需要使用ReactJS在浏览器中上传视频并播放它。以后,需要将其发布到数据库中。我可以使用formData()来管理数据库部分,但是现在问题是在浏览器中上载和播放它。

我能够将视频数据转换为base64。但是我无法在浏览器中播放。这是我尝试过的

encodeData() {
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64
        return srcData.result
      }


      fileReader.readAsDataURL(fileToLoad);
      this.setState({
        GotInputImage: fileReader
      })
    }
  }



<input id="inputFileToLoad" type="file" onChange={this.encodeData} />

    <video>
      <source src= {this.state.GotInputImage.result} />
    </video>

0 个答案:

没有答案