CODEWITHSUNDEEP
javascriptvideoreact-nativewistia
Bhushan
Bhushan

Reputation: 71

Playing Wistia video in React Native WebView

We have a video CMS portal that powers React Native mobile app.

Approach 1:

Use react-native-video which works well, however, I realized that it requires a direct video file URL to play.

Extracting video URL is easy using Wistia API however as it stores videos in different formats, we need to know which resolution OR somehow use the "auto" setting for video resolution which figures out the right video based on screen size and internet connection.

This setting is not available by API. One solution could be to actually detect that and pass it to the backend, make a decision and pass back the correct asset URL. This somehow felt incorrect as there is too much indirect work involved to just get a video working. So I looked at other options

Approach 2
Use source property of and include IFrame. This worked with a Youtube video but somehow can't get it working with Wistia. Didn't find any gist/snippets which actually got this working as well.

Approach 3 Use platform specific component like react-native-wistia. I have requested the author' help(raised the issue on Github) as was unable to install this from the npm registry.

Approach 2 seems to be the most generic and apt for the requirement (unless I am completely missing other approaches ).

My question is:

  1. Does anyone have an IFrame snippet for React Native which will work for Wistia and
  2. Is there a better way to do this that I might be missing on?
  3. Are there any settings required on Wistia to enable playing video from the mobile which I might be missing on?

Upvotes: 6

Views: 2314

Answers (1)

uday
uday

Reputation: 41

The wistia player API can be used by intecting javascript code in a webview. With the newer version of react native a injectedJavascriptCode has been introduced in WebView component. The iframe can be included in a html and rendered in a web view

JsCode to be injected

const jsCode = `
  var wistia_src = document.createElement('script');
  wistia_src.setAttribute('src', '//fast.wistia.com/assets/external/E-v1.js');
  document.body.appendChild(wistia_src);
  window._wq = window._wq || [];
  window._wq.push({
    id: "u8p9wq6mq8",
    options: {
      playerColor: "#56be8e"
    },
    onHasData: function(video) {
      video.bind("play", function() {
        console.log("'play' event fired for " + video.name() + "! 🎉");
        return video.unbind;
      });

      video.bind("secondchange", function(s) {
        if (s == 5) {

        }
      });
    }
  })
}
`;

WebView

<View style={{ flex: 1 }}>
  <WebView
    source={require('index.html')}
    style={{ flex: 1 }}
    injectedJavaScript={jsCode}
    javaScriptEnabled={true}
    />
</View>

index.html

<html>
  <body>
    <iframe src="//fast.wistia.com/embed/medias/q7w9f2rvhw" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="350" height="400"></iframe>
  </body>
</html>

Upvotes: 4

Related Questions