如何使用带有反应的 wistia 内联播放器？

Question

I am trying to load in an inline video player from wistia, and the docs say to use this code :

<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>

I have changed the style syntax to jsx as well as class to className * see below

        <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%"}}>

Still this isn't letting the browser render the player, I believe this may be due to the script tags, but am not sure how to fix this. How can I make my video appear? * Note if I was to use regular html that inline video player would work for me & also I can't use the iframe code because that uses htm l5 player for mobile devices rather than wistia (atleast when I tried it)

Answer 1

Create a separate component and import it.

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

Answer 2

Here is a more up to date component you can use. The hashedId is a prop.

 import React, {Component} from 'react'; class WistiaEmbed extends Component { constructor(props) { super(props); const {hashedId, ...embedOptions} = {...this.props}; if (typeof window !== `undefined`) { window._wq = window._wq || []; window._wq.push({ id: hashedId, options: embedOptions, onHasData: (video) => { this.handle = video; }, }); } } _renderCommon() { const {hashedId} = this.props; return ( <div class="wistia_swatch" style={{ height: '100%', left: 0, opacity: 0, overflow: 'hidden', position: 'absolute', top: 0, transition: 'opacity 200ms', width: '100%', }} > <img src={`https://fast.wistia.com/embed/medias/${hashedId}/swatch`} style={{filter: 'blur(5px)', height: '100%', objectFit: 'contain', width: '100%'}} alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /> </div> ); } _renderResponsive() { const {hashedId, padding} = this.props; return ( <div className="wistia_responsive_padding" style={{padding, position: 'relative'}}> <div className="wistia_responsive_wrapper" style={{height: '100%', left: '0', position: 'absolute', top: 0, width: '100%'}} > <div className={`wistia_embed wistia_async_${hashedId} videoFoam=true`} style={{height: '100%', width: '100%', position: 'relative'}} > {this._renderCommon()} </div> </div> </div> ); } _renderFixed() { const {width, height, hashedId} = this.props; return ( <div class={`wistia_embed wistia_async_${hashedId}`} style={`height:${height || 480}px;position:relative;width:${width || 640}px`} > {this._renderCommon()} </div> ); } render() { const {isResponsive} = this.props; return isResponsive ? this._renderResponsive() : this._renderFixed; } componentDidMount() { if (!document.getElementById('wistia_script')) { var wistiaScript = document.createElement('script'); wistiaScript.id = 'wistia_script'; wistiaScript.type = 'text/javascript'; wistiaScript.src = 'https://fast.wistia.com/assets/external/E-v1.js'; wistiaScript.async = true; document.body.appendChild(wistiaScript); } } componentWillUnmount() { this.handle && this.handle.remove(); } } WistiaEmbed.defaultProps = { isResponsive: true, }; export default WistiaEmbed;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>