6

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

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

方法 2
使用 IFrame 的源属性并包含 IFrame。这适用于 Youtube 视频，但不知何故无法与 Wistia 一起使用。没有找到任何实际上也能正常工作的要点/片段。

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

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

我的问题是：

  1. 有没有人有 React Native 的 IFrame 片段，它适用于 Wistia 和
  2. 有没有更好的方法来做到这一点，我可能会错过？
  3. Wistia 上是否需要任何设置才能从手机播放我可能会错过的视频？
4

1 回答 1

4

wistia 播放器 API 可以通过在 web 视图中检测 javascript 代码来使用。随着新版本的 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>

索引.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>

于 2018-02-08T05:38:57.737 回答