Menu
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:
976
WebViews offer developers opportunities to render any web components in a React Native application. A web component can be anything from a whole webpage/application or just a simple HTML file. The package react-native-webview makes it super simple to embed WebViews into your React Native apps!
To achieve playing Youtube videos in React Native, we will be making use of the npm dependency named react-native-youtube-iframe. We will work through using this library by fully integrating it into an app.
Import the React Native WebView package in App. js . We will create a normal HTML page in WebView and use “script” tags to let the HTML page communicate with the React Native app. In the “script” tag, we are going to call a sendDataToReactNativeApp() function in which we will use a window property called window.
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
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) {
}
});
}
})
}
`;<View style={{ flex: 1 }}>
<WebView
source={require('index.html')}
style={{ flex: 1 }}
injectedJavaScript={jsCode}
javaScriptEnabled={true}
/>
</View><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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
