javascript - 将本地 mp4 文件转换为 fileURL 以进行视频 react

Question

使用video react库播放本地mp4视频，我看到有人用这个功能将选定的视频文件设置为url，他们说可以。我可以选择视频文件，但它似乎不起作用，我的播放器仍然黑屏且无法播放。

输入是你选择文件的地方，然后它运行函数，然后你使用播放器函数中的videoFileURL

import React, { Component } from "react";
import "./App.css";
import "../node_modules/video-react/dist/video-react.css";
import { Player } from "video-react";

class App extends Component {
  render() {
    return (
      <div className="App">
        <link rel="stylesheet" href="/css/video-react.css" />


        <form id="videoFile">
          <input
            type="file"
            name="video"
            multiple="false"
            onChange={e => {
              this.handleVideoLoad(e);
            }}
          />
        </form>


        <Player
          playsInline
          src={this.videoFileURL}
          fluid={false}
          width={480}
          height={272}
        />

      </div>
    );
  }

  handleVideoLoad(e) {
    console.log(e.target.files);
    let files = e.target.files;
    if (files.length === 1) {
      let file = files[0];
      this.setState({
        videoFileURL: URL.createObjectURL(file),
        videoFileObject: file
      });
    }
  }
}

export default App;

Answer 1

你在这里遗漏了一些东西:

1. 你已经使用了 setState 但你没有声明任何状态变量

2. 当您提供播放器 URL 时，您应该尝试从状态变量访问它

   import React, { Component } from "react";
   import "./App.css";
   import "../node_modules/video-react/dist/video-react.css";
   import { Player } from "video-react";
   class App extends Component {
   state={
    videoFileURL: '',
    videoFileObject: null
    }
   
   render() {
   return (
     <div className="App">
       <link rel="stylesheet" href="/css/video-react.css" />
       <form id="videoFile">
         <input
           type="file"
           name="video"
           multiple="false"
           onChange={e => {
             this.handleVideoLoad(e);
           }}
         />
       </form>
   
   
       <Player
         playsInline
         src={this.state.videoFileURL}
         fluid={false}
         width={480}
         height={272}
       />
   
     </div>
   );
    }
   
    handleVideoLoad(e) {
   console.log(e.target.files);
   let files = e.target.files;
   if (files.length === 1) {
     let file = files[0];
     this.setState({
       videoFileURL: URL.createObjectURL(file),
       videoFileObject: file
     });
   }
   }
    }
   
   export default App;
   

有关更多信息，请参阅:docs