时间戳

首页 > 解决方案 > React Native 加载 Delight VR 视频播放器

react-native - React Native 加载 Delight VR 视频播放器

问题描述

我正在将 Cordova 应用程序迁移到 React-Native。

我们在应用程序上有一个 VR 播放器，用于 VR 耳机（Google Cardboard、Samsung Gear 等），但也可以作为常规 360 2D 视频播放。 Delight VR通过内置控件提供了我们需要的一切，并且在 Cordova 上运行得非常好。

在迁移到 React-Native 时，我们找不到任何类似的原生播放器，最接近的是ViroMedia，但是，它不提供任何内置控件，不支持 360 以外的其他投影（我们的视频可以来在不同的投影中，即：180 LR、360 UD 等）。

Delight VR 的支持团队回复我们确认我们可以使用 React Native Webview 来加载他们的播放器。这不是理想的解决方案，但它是我们能找到的最好的解决方案。

然后，我尝试使用 react-native-webview 来实现它，但现在我无法取得任何成功。

The video source is stored in an S3 bucket and it is public accessible

我试过加载本地网页

    <WebView style={styles.container}
      originWhitelist={['*']}
      source={{ html: mypage }}
    />

没用，收到了一些与来源有关的消息，并且播放器一直在加载。经过一些测试，我发现喜悦 vr 需要运行 Web 服务器，源不能是文件，不确定这是否是它失败的原因。无论如何，我已经设置了一个 Web 服务器，一个公共 URL，并在浏览器上对其进行了测试，它运行良好。所以我改变了我的代码指向这个 URL

    <WebView style={styles.container}
      source={{ uri: 'https://myurl.com/' }}
    />

现在，当我尝试播放视频时，我收到了消息

内容问题

找不到可播放的视频源

当我转到 Safari 中的 url 上下文来调试问题时，我看到对视频的请求没有返回错误，但是如果我转到预览选项卡，我会看到消息An error occurred trying to load the resource

我也尝试了不同的选择，即：mixedContentMode='always' allowFileAccess={true} allowUniversalAccessFromFileURLs={true}

知道可能导致此问题的原因吗？如果您知道在 React-Native 上加载具有类似 Delight VR 功能的 VR（和常规）视频的任何其他替代方案，它也是一个切换到它的选项。

标签： react-nativevirtual-reality360-virtual-realitydelightvr

解决方案

推荐阅读