【问题标题】:Youtube embedded video problem (video unavailable)Youtube嵌入视频问题(视频不可用)
【发布时间】:2019-08-28 02:35:28
【问题描述】:

我想在我的 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 上打开视频:

这是一个测试它的链接:https://snack.expo.io/@maxgfr/youtube-embedded

任何帮助将不胜感激

马克西姆

编辑:无效的网址示例https://www.youtube.com/embed/8GaWM2a3FAc

【问题讨论】:

  • 你试过原点是http而不是https吗?
  • 我也遇到了类似的问题,你解决了吗?
  • 这里有同样的问题。适用于某些视频,而不适用于其他视频。
  • 让我们看看下面我的答案,这是我发现解决这个问题的唯一方法..

标签: webview youtube youtube-api youtube-data-api youtube-javascript-api


【解决方案1】:

解决这个问题:

由于视频 ID,我创建了一个加载 youtube 视频的 Web 应用程序。我的端点是这样的: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 视频的内​​容?它是坐在 iframe 中还是?我正在尝试实现类似但使用 angularJS
  • 对于 AngularJS,我认为您必须创建一个 YoutubeVideoComponent,在其中传递您要加载的 youtube 视频的 ID(感谢 url 参数)。然后,您创建一个类似{ path: 'youtube/:id', component: YoutubeVideoComponent } 的路线。我建议您使用我使用的 html 代码示例或类似的东西来显示一个包含所有宽度和高度的视频。最后,在您的 react-native 应用程序中,您只需通过传入要观看的 youtube 视频的 id 参数来加载 url。我希望这对你来说很清楚:)
猜你喜欢
  • 2010-11-10
  • 2022-10-13
  • 2019-04-01
  • 2013-09-02
  • 2022-01-17
  • 2019-11-12
  • 2016-11-26
  • 2011-05-18
  • 1970-01-01
相关资源
最近更新 更多