javascript - 上传的视频不会使用 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

然后我将文件传递给一个新的 child ，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

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

Answer 1

要通过文件输入预览用户选择的视频，您需要使用URL.createObjectURL并将其传递给video标签的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>

    )
}