Question

我正在尝试使用ReactJS和JSX在我的网页中使用HTML <video>标记。现在，即使我的组件具有文件路径

，也没有播放任何内容

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 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="mov_bbb.mp4">
</video>

Answer 2

Video React

播放视频的组件将是一个更好的选择，因为它具有很多自定义功能

Answer 3

在这种情况下，我添加“？”在视频网址的末尾，效果很好。通过在aws s3存储桶中使用视频，我得到了与网址相同的情况。因此，我将该网址用作“ assets / media / Cherngloong_website_intro_Uz921bT.mp4？”

Answer 4

把视频放到public/videos文件夹下，src写如下

ReactJS组件HTML5视频

4 个答案: