ReactJS組件HTML5視頻

我想使用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>

來源

2016-04-29 Liondancer

什麼具體不工作？您是否嘗試了'autoplay =「autoplay」'而不是添加'controls =「controls」'，以便您可以點擊視頻來啓動它？ – loganfsmyth

看起來像JSX它應該是'autoplay'沒有值，或'autoplay = {true}' – loganfsmyth

@loganfsmyth嘗試'autoPlay'和'autoPlay = {true}'沒有運氣= [ – Liondancer

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

來源

2016-04-29 23:32:29

ReactJS組件HTML5視頻

回答

相關問題