上传的视频无法使用 html 视频代码播放

Question

我尝试播放用户使用 Uploader.js 子组件上传的视频：

import React from 'react'

function Uploader ({passFile}){

function getFile(){
var files = document.getElementById("my-files")
files = files.files
// create array of file names
var i 
var filesMat = []
for (i=0; i< files.length; i++){
filesMat.push(files[i])
}
files = filesMat
//pass files back to app
passFile(files)
}
return(
<div>
<h3>Uploader</h3>
<input type='file' id = 'my-files' multiple onChange = {()=>getFile()} />
</div>
)
} 
export default Uploader

此文件将传递到父组件，App.js：

import React, {useState} from 'react'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Nav from './Nav'
import HomePage from './HomePage'
import Videos from './Videos'
import Uploader from './Uploader'
import './App.css'
function App (props) {
var uploadedFiles
function getFileFromChild(files){
uploadedFiles = files
}
return(
<Router>
<div className = "nav-bar">
<Nav/>
<Switch>
<Route path='/' exact component= {HomePage} />
<Route path='/videos' render={(rest)=> <Videos {...rest} uploadedFiles= {uploadedFiles}/>
}/>
<Route path='/uploader' render={
(rest)=> <Uploader {...rest} passFile= {getFileFromChild}/>
} />
</Switch>

</div>
</Router>
)
}
export default App

然后，我将文件传递给一个新的孩子，Videos.js它应该使用<video>标签播放的位置：

import React from 'react'

function Videos ({uploadedFiles}){
//if (uploadedFiles) {
//console.log(uploadedFiles[0],uploadedFiles[0].name)
return(
<div>
<h3>Videos</h3>
<video >
<source  src={uploadedFiles[0].name}  id='video' type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
)
//} else return(<div> <h2> No Video Uploaded </h2></div>)
}
export default Videos

使用 chromes 开发人员工具，我收到 206 部分内容的消息，因此我认为服务器正在查找视频。检查视频元素后，我得到<source>标签的src属性的以下链接地址：http://localhost:3000/video.mp4。有谁知道为什么视频无法播放？

Answer 1

要通过文件输入预览用户选择的视频，您需要使用URL.createObjectURL并将其传递给视频标签的src：

function Videos ({uploadedFiles})
{
const src = URL.createObjectURL(uploadedFiles[0]);
return(
<div>
<h3>Videos</h3>
<video>
<source  src={src}  id='video' type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
)
}