【问题标题】:How to play Youtube videos using Expo如何使用 Expo 播放 Youtube 视频
【发布时间】:2017-12-07 01:57:03
【问题描述】:

我正在尝试在我的世博项目中使用react-native-youtube component。但是,我无法让它工作。到目前为止,我只有一个带有红色边框的黑屏。我尝试按照online 上的视频说明进行操作,但是,expo 没有 iOS 或 Android 文件夹,这意味着我无法在 XCode 中打开它并摆弄它。如何使用 expo 播放 youtube 视频?正如您可能已经从我的问题中注意到的那样,我是使用 expo 的 react-native 新手。

【问题讨论】:

标签: ios react-native youtube expo


【解决方案1】:

目前,Expo 不支持 YouTube。您可以弹出项目并安装 react-native-youtube 库或从 WebView 加载视频,如下所示:

<WebView
    style={{flex:1}}
    javaScriptEnabled={true}
    source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>

【讨论】:

  • 当用户导航到其他屏幕时,视频不会停止播放。
  • @yogeshhkumarr 你必须删除/杀死网络视图
  • 我使用了这种方法,但它被 Google Play 商店拒绝了,因为“启用 YouTube 视频的后台播放违反了设备和网络滥用政策。这可以通过按电源按钮打开播放 YouTube 视频时屏幕关闭。” --- 我无法在我自己的设备上重现他们所描述的内容,所以这可能是其他设备的问题(???)。无论如何,这里描述了解决方案:stackoverflow.com/questions/36382935/…
  • @Clay 你可以在应用程序进入后台时暂停视频,检查facebook.github.io/react-native/docs/appstate.html
  • 在我的评论中,我链接到一个 stackoverflow 答案(您已回答),该答案是执行您建议的说明。
【解决方案2】:

对于仍在寻找此功能的任何人,请尝试使用 expo 支持的此软件包

https://github.com/LonelyCpp/react-native-youtube-iframe

为 React Native 构建的 Youtube IFrame 播放器 API 的封装。使用已知比原生 youtube 应用更稳定的 webview 播放器。

由于新的 expo SDK 支持现代社区维护的 webview,它应该可以跨平台无缝运行

【讨论】:

    【解决方案3】:

    目前在 React Native 应用程序中获取 YouTube 视频的方法是在您的项目中使用 React Native 的 WebView 组件。

    下面是一个小食,它以 Instagram 注册流程为例展示了 WebView 如何工作:https://snack.expo.io/HJRKKTmAx

    如果这不是您要找的东西,我很抱歉:(

    要使用 react-native-youtube 组件,您必须分离您的 Expo 项目 ExpoKit:

    ExpoKit 是一个 Objective-C 和 Java 库,允许您将 Expo 平台和现有 Expo 项目作为更大的标准原生项目的一部分使用 - 您通常会使用 Xcode、Android Studio 或 react-native 创建一个初始化。

    更多信息在这里:https://docs.expo.io/versions/v18.0.0/guides/detach.html

    我希望这两个选项可以解决您的问题,如果有其他方法可以提供帮助,请告诉我。

    【讨论】:

    • 当用户导航到其他屏幕时,视频不会停止播放。
    • 您必须在组件卸载时销毁播放器以使其停止。
    猜你喜欢
    • 2017-12-20
    • 2016-07-26
    • 2012-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-07
    • 2013-09-16
    • 1970-01-01
    相关资源
    最近更新 更多