ReactJS 组件 HTML5 视频

Posted 2023-05-07

【中文标题】ReactJS 组件 HTML5 视频

【英文标题】：ReactJS component HTML5 video

【发布时间】：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  />
                </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  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/b0u3swswhpostimg.org/image/ccg3pz9ld

【参考方案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 写入如下