在 React Native WebView 中播放 Wistia 视频答案

【问题标题】：Playing Wistia wideo in React Native WebView在 React Native WebView 中播放 Wistia 视频
【发布时间】：2018-02-08 13:38:57
【问题描述】：

我们拥有支持 React Native 移动应用的视频 CMS 门户。

方法一： 使用react-native-video 效果很好，但是我意识到它需要直接的视频文件 URL 才能播放。使用 Wistia API 提取视频 url 很容易，但是因为它以不同的格式存储视频，我们需要知道哪种分辨率或如何使用视频分辨率的“自动”设置来根据屏幕尺寸和互联网连接计算出正确的视频。 API 不提供此设置。一种解决方案可能是实际检测到这一点并将其传递给后端，做出决定并传回正确的资产 URL。这在某种程度上感觉是不正确的，因为涉及到太多的间接工作才能让视频正常工作。所以我查看了其他选项

方法 2
使用 IFrame 的源属性并包含 IFrame。这适用于 Youtube 视频，但不知何故无法与 Wistia 一起使用。没有发现任何 gist/sn-ps 实际上也能正常工作。

方法 3 使用平台特定的组件，如react-native-wistia。我已请求作者的帮助（在 github 上提出了问题），因为无法从 npm 注册表安装它。

方法 2 似乎是最通用且最适合要求的（除非我完全错过了其他方法）。

我的问题是：

是否有人拥有适用于 Wistia 和的 React Native 的 IFrame sn-p 和
有没有更好的方法来做到这一点，我可能会错过？
是否需要在 Wistia 上进行任何设置以启用我可能会错过的从移动设备播放视频？

【问题讨论】：

标签： javascript video react-native wistia

【解决方案1】：

可以通过在 web 视图中检测 javascript 代码来使用 wistia 播放器 API。随着新版本的 react native，WebView 组件中引入了注入的JavascriptCode。 iframe 可以包含在 html 中并在 web 视图中呈现

要注入的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>

【讨论】：