javascript - ReactJS 组件 HTML5 视频

Question

我正在尝试使用 HTML 在我的网页中显示视频 <video>使用 ReactJS 和 JSX 标记。现在即使我的组件有文件路径也没有播放任何内容

介绍视频 this.props:

{
  introVideo: "assets/media/Cherngloong_website_intro_Uz921bT.mp4",
  muted: "true"
}

组件:

class IntroVideo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return(
            <div>
                <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
                    <source src={ this.props.introVideo } type="video/mp4" />
                </video>
            </div>
        );
    }
}

这是我在开发者工具中看到的:

<video class="video-container video-container-overlay" autoplay="" loop="" muted="" data-reactid=".0.1.0.0">
    <source type="video/mp4" data-reactid=".0.1.0.0.0" src="assets/media/Cherngloong_website_intro_Uz921bT.mp4">
</video>

在开发人员工具中，如果我右键单击 src值并单击 "Open link in new tab" ，视频将在新标签页中播放。所以我相信文件的路径是正确的。

我正在为另一个组件做同样的事情，但它是用于图像并且工作正常:

关于 this.props:

{
  aboutImg: "assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg"
}

组件:

class About extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return(
            <div id="about-container">
                <div id="about-img-container">
                    <img src={ this.props.aboutImg } alt="about_img"/>
                </div>
                <div id="about-text-container">
                    <p>
                        Message
                    </p>
                </div>
            </div>
        );
    }
}

开发者工具:

<div id="about-container" data-reactid=".0.1.1">
    <div id="about-img-container" data-reactid=".0.1.1.0">
        <img alt="about_img" data-reactid=".0.1.1.0.0" src="assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg">
    </div>
    <div id="about-text-container" data-reactid=".0.1.1.1">
        <p data-reactid=".0.1.1.1.0">Message</p>
    </div>
</div>

Answer 1

这条路看起来很糟糕。生成的 html 似乎没问题。我在这里测试过:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

视频渲染良好，我所做的只是更改 src。

<video className="video-container video-container-overlay" autoPlay="" loop="" muted="" data-reactid=".0.1.0.0">
  <source type="video/mp4" data-reactid=".0.1.0.0.0" src="mov_bbb.mp4">
</video>