ReactJS 组件 HTML5 视频

Question

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

IntroVideo 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>