ReactJS组件HTML5视频

  • Z时代
  • 2024-01-10
  • 分类：问答

我想使用ReactJS和JSX使用HTML <video>标记在我的网页上放映视频。现在什么都不玩，即使我的分量有文件路径ReactJS组件HTML5视频

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值和c舔"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>

回答：

它看起来很糟糕。生成的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>

以上是 ReactJS组件HTML5视频 的全部内容， 来源链接： utcz.com/qa/265074.html

回到顶部