我们有视频CMS门户网站，可为React Native移动应用程序提供支持。
方法1:
使用react-native-video效果很好，但是我意识到它需要直接的视频文件URL才能播放。
使用Wistia API提取视频网址很容易，但是由于它以不同的格式存储视频，我们需要知道哪种分辨率，或者一些如何使用“自动”设置进行视频分辨率，从而根据屏幕大小和互联网连接确定正确的视频。
API无法使用此设置。一种解决方案是实际检测到该错误并将其传递给后端，做出决定并传递回正确的 Assets 网址。某种程度上觉得是不正确的，因为涉及太多间接工作，无法使视频正常工作。所以我看了其他选择
方法2
使用的源属性并包含IFrame。
这适用于Youtube视频，但由于某种原因无法与Wistia一起使用。找不到任何能使它正常工作的要点/摘要。
方法3
使用平台特定的组件，例如react-native-wistia。
我已请求作者的帮助(在github上引发问题)，因为无法从npm注册表中安装它。
方法2 似乎是最通用且最适合要求的方法(除非我完全错过了其他方法)。
我的问题是:
最佳答案
可以通过在网络 View 中插入javascript代码来使用wistia播放器API。在较新版本的react native中，已在WebView组件中引入了InjectionJavascriptCode。 iframe可以包含在html中，也可以在网络 View 中呈现
要注入(inject)的JsCode
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>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>