在React Native WebView中玩Wistia wideo

Question

在React Native WebView中玩Wistia wideo

Bhu*_*han 5 javascript video wistia react-native

我们有视频CMS门户网站，可为React Native移动应用程序提供支持。

方法1： 使用效果很好的react-native-video，但是我意识到要播放直接视频文件URL。使用Wistia API提取视频网址很容易，但是由于它以不同格式存储视频，因此我们需要知道哪种分辨率，或者一些如何使用“自动”设置进行视频分辨率，从而根据屏幕大小和互联网连接确定正确的视频。API无法使用此设置。一种解决方案可能是实际检测到该错误并将其传递给后端，做出决定并传递回正确的资产网址。这有点不对劲，因为要使视频正常工作涉及太多的间接工作。所以我看了其他选择

方法2
使用IFrame的源属性并包括IFrame。这适用于Youtube视频，但由于某种原因无法与Wistia一起使用。找不到任何实际上能使它正常工作的要点/摘要。

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

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

我的问题是：

是否有人有适用于React Native的IFrame代码段，该代码段适用于Wistia和
有没有更好的方法可以做到这一点，而我可能会错过呢？
Wistia是否需要任何设置才能启用我可能会错过的来自手机的视频播放？

Answer 1

小智 4

可以通过在 web 视图中连接 javascript 代码来使用 wistia 播放器 API。在较新版本的 React Native 中，WebView 组件中引入了注入的 JavaScript 代码。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) {

        }
      });
    }
  })
}
`;

Run Code Online (Sandbox Code Playgroud)

网页视图

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，9 月前
查看次数：	711 次
最近记录：	8 年，3 月前