ReactJS 组件 HTML5 视频答案

【问题标题】：ReactJS component HTML5 videoReactJS 组件 HTML5 视频
【发布时间】：2016-08-25 05:44:55
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

具体是什么不起作用？您是否尝试过autoplay="autoplay"，或者添加了controls="controls"，以便您可以点击视频开始播放？
看起来在 JSX 中应该是 autoplay 没有值，或者 autoplay={true}
@loganfsmyth 试过 autoPlay 和 autoPlay={true} 没有运气=[
那么具体是什么不起作用？你能看到预览图像，但它不会播放吗？你试过我的第一组建议了吗？
@loganfsmyth 我尝试了你的建议，但没有成功=[我根本看不到任何视频。好像没有src 这是我在浏览器和开发工具上看到的：postimg.org/image/b0u3swswh postimg.org/image/ccg3pz9ld

标签： javascript reactjs html5-video ecmascript-6 jsx

【解决方案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>

【讨论】：

【解决方案2】：

Video React

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

将视频放在 public/videos 文件夹中，并将 src 写入如下

【讨论】：