在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ React新手提問一個關(guān)于video視頻加載的問題。

React新手提問一個關(guān)于video視頻加載的問題。

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'));

圖片描述

出來是這個效果。

回答
編輯回答
避風(fēng)港

infos 對象中的video不要相對路徑,通過import 或者require引入。
例如:

const infos = [
    {id: '01', name: 'Tom', date: '2018-09-11', video: import('./video/01.mp4')},
    {id: '02', name: 'Lily', date: '2018-09-19', video: import('./video/02.mp4')}
]
2017年7月14日 15:25