A novice to React asks a question about video video loading.

import React from "react";
import ReactDOM from "react-dom";
class Doctor extends React.Component {
    render() {
        return (
            <div>
                
<a>{this.props.doctorAccount}</a>

            </div>
        )
    }
}
class Info extends React.Component {
    render() {
        var content = [];
        this.props.infos.forEach((info) => {
            content.push(
                <div key={info.id}>
                    
{info.name}

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

This is the effect of

.

React.js javascript
Mar.28,2021
The video in the

infos object does not have a relative path, but is introduced through import or require .
for example: 

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')}
]

Previous: The pages in the iframe cannot retain the cookie after the chrome of ios is enabled for iframe refresh.

Next: When React dnd implements drag and drop, how to add moving content in the target box?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu