reactjs - 如何将 wistia 内联播放器与 React 一起使用？

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 播放器而不是 wistia(至少在我尝试时)

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>
        );
    };
}