Question

I'm developing a React app for editing videos and I'm having a little trouble with the download functionality. The backend is a Node/Express app on localhost:3001 - this is where the video gets saved. The React frontend is being developed on localhost:3000 (with the proxy getting set in package.json for communication between the ports).

Everything works great until I get to the final component:

// ViewVideoPage.js

import React from 'react';

export default (props) => {
  return (
    <div>
      <video controls preload src={props.outputFile}></video>
      <a href={props.outputFile} download>Download Video</a>
    </div>
  )
}

props.outputFile === './outputFile.mp4'
The video renders perfectly. I can watch the video fine.
When trying to download, Chrome gives me the download prompt but says "Failed - No File".

So I can watch the video fine, but I can't download it for some reason. I can also go to localhost:3001/outputFile.mp4 and view it. Going to localhost:3000/outputFile.mp4 just shows my React template though (I expect the issue has to do with this).

Here's App.js if it helps:

import React, {Component} from 'react';
import {Router, Switch, Route} from 'react-router-dom';

import history from './History.js';

import UploadPage from './UploadPage.js';
import ViewVideoPage from './ViewVideoPage.js';
import WordEditPage from './WordEditPage.js';

import './App.css';

class App extends Component {

  constructor(props) {
    super(props);

    this.handleConfirmWords     = this.handleConfirmWords.bind(this);
    this.handleStartOver        = this.handleStartOver.bind(this);
    this.handleVideoSubmission  = this.handleVideoSubmission.bind(this);
  }

  // ...helper functions...

  render() {
    return (
      <div>
        <h1>Video Editor</h1>

        <Router history={history}>
          <Switch>

            <Route exact path="/" render={() => (
              <UploadPage handleVideoSubmission={this.handleVideoSubmission}/>
            )}/>

            <Route path="/edit-words" render={() => (
              <WordEditPage handleConfirmWords={this.handleConfirmWords} words={this.state.videoDetails.words}/>
            )}/>

            <Route path="/view-video" render={() => (
              <ViewVideoPage outputFile={this.state.videoDetails.files.output}/>
            )}/>

          </Switch>
        </Router>

        <button onClick={this.handleStartOver}>Start Over</button>
      </div>
    );
  }
}

export default App;

Thank you for taking a look! Let me know if there's any more information that I can provide that would be useful.

React：视频显示在<video>中，但无法在<a>

0 个答案: