Youtube 内嵌视频问题（视频不可用）

Question

当我想在我的 expo 应用程序中嵌入 YouTube 视频时遇到问题，当我单击播放按钮时，有时会收到此消息：

例如，当我在 reddit 上发布这个视频时，它通过他们的 youtube 嵌入式播放器完美播放。

我使用这个代码示例：

              <WebView
                useWebKit={true}
                ref={(ref) => { this.videoPlayer = ref;}}
                source={{uri: 'https://www.youtube.com/embed/bo_efYhYU2A?rel=0&autoplay=0&showinfo=0&controls=0'}}
                scrollEnabled={false}
                domStorageEnabled={true}
                javaScriptEnabled={true}
              />

我知道允许嵌入视频这一事实，因为如果不是这样，我会收到一条不同的错误消息，允许我在 youtube 上打开视频：

这里有一个 link 来测试它：https://snack.expo.io/@maxgfr/youtube-embedded

如有任何帮助，我们将不胜感激

马克西姆

编辑：url 的示例不起作用 https://www.youtube.com/embed/8GaWM2a3FAc

Answer 1

解决这个问题：

我创建了一个 Web 应用程序，它可以通过视频 ID 加载 YouTube 视频。我的端点是这样的：https://mywebsite.com/ID_VIDEO_YOUTUBE

然后在我的 React Native 应用程序中，我只需要加载我网站的 URL :

<WebView
   useWebKit={true}
   ref={(ref) => { this.videoPlayer = ref;}}
   source={{uri: 'https://mywebsite.com/ID_VIDEO_YOUTUBE'}}
   scrollEnabled={false}
   domStorageEnabled={true}
   javaScriptEnabled={true}
/>

编辑：这是我在 Vue JS 应用程序中使用的代码示例

<template>
  <div style="position: fixed;overflow-y: hidden;overflow-x: hidden;width:100%;height:100%;">
    <iframe style="width:100%;height:100%;" :src="'https://www.youtube.com/embed/'+this.$route.params.id+'?&autoplay=1&playsinline=1'" autoplay="1" playsinline="1" frameborder="0" scrolling="no" allow="playsinline; accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</template>

<script>
export default {
  name: 'youtube',
  head: {
    link: [{
      r: 'icon',
      h: '/static/favicon.png',
      t: 'image/png'
    }]
  }
}
</script>

Youtube 内嵌视频问题（视频不可用）

Youtube embedded video problem (video unavailable)

youtube

youtube-api

webview

youtube-javascript-api

youtube-data-api