React新手提问一个关于video视频加载的问题。

Question

import React from 'react';

import ReactDOM from 'react-dom';

class Doctor extends React.Component {

    render() {

        return (

            <div>

                <p><a>{this.props.doctorAccount}</a></p>

            </div>

        )

    }

}

class Info extends React.Component {

    render() {

        var content = [];

        this.props.infos.forEach((info) => {

            content.push(

                <div key={info.id}>

                    <p>{info.name}</p>

                    <video id="my-video" controls preload="auto" width="640" height="264">

                        <source src={info.video} type='video/mp4' />

                    </video>

                </div>

            );

        })

        return (

            <div className="container">

                {content}

            </div>

        )

    }

}

const doctorAccount = "20180901";

const infos = [

    {id: '01', name: 'Tom', date: '2018-09-11', video: './video/01.mp4'},

    {id: '02', name: 'Lily', date: '2018-09-19', video: './video/02.mp4'}

]

class App extends React.Component {

    render() {

        return (

            <div className="contain">

                <Doctor doctorAccount={this.props.doctorAccount} />

                <Info infos={this.props.infos} />

            </div>

        );

    }

}

ReactDOM.render(<App doctorAccount={doctorAccount} infos={infos}/>, document.getElementById('root'));

出来是这个效果。

Answer 1

infos 对象中的video不要相对路径，通过import 或者require引入。例如：const infos = [&nbsp; &nbsp; {id: '01', name: 'Tom', date: '2018-09-11', video: import('./video/01.mp4')},&nbsp; &nbsp; {id: '02', name: 'Lily', date: '2018-09-19', video: import('./video/02.mp4')}]