如何使用wistia內聯播放器進行反應？

Question

我試圖從wistia內嵌視頻播放器來加載，並且文檔說使用此代碼：

<script src="https://fast.wistia.com/embed/medias/<hashedid>.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.0% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_<hashedid> videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div> 

我已經改變了風格的語法來JSX以及類的className見下面

 <script src="https://fast.wistia.com/embed/medias/<hashed_id>.jsonp" async></script> 
     <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script> 
     <div className="wistia_responsive_padding" style={{padding:"56.0% 0 0 0",position:"relative"}}> 
     <div className="wistia_responsive_wrapper" style={{height:"100%",left:0,position:"absolute",top:0,width:"100%"}}> 
     <div className="wistia_embed wistia_async_<hashed_id> videoFoam=true" style={{height:"100%",width:"100%"}}> 

這還是不讓瀏覽器渲染播放器，我相信這可能是由於腳本標記，但我不知道如何解決這個問題。我怎樣才能讓我的視頻出現？ *請注意，如果我使用內嵌視頻播放器的普通html，我也可以使用&也不能使用iframe代碼，因爲它使用htm l5播放器而不是智能手機（至少當我嘗試它時）（至少當我嘗試時）

Answer 1

創建一個單獨的組件並將其導入。

export default 
class YourVideo extends React.Component { 

componentWillMount() { 
    const script1 = document.createElement("script"); 
    const script2 = document.createElement("script"); 

    script1.src = "https://fast.wistia.com/embed/medias/videolink.jsonp"; 
    script1.async = true; 

    script2.src = "https://fast.wistia.com/assets/external/E-v1.js"; 
    script2.async = true; 

    document.body.appendChild(script1); 
    document.body.appendChild(script2); 
} 

render() { 
    return (
     <div> 
      <div className="wistia_embed wistia_async_videolink videoFoam=true"/> 
     </div> 
     ); 
    }; 
}