Webview Youtube嵌入式视频问题(视频不可用)

Webview Youtube嵌入式视频问题(视频不可用),webview,youtube,youtube-api,youtube-data-api,youtube-javascript-api,Webview,Youtube,Youtube Api,Youtube Data Api,Youtube Javascript Api,当我想在我的expo应用程序中嵌入YouTube视频时,我遇到了一个问题,当我单击“播放”按钮时,有时会收到以下消息: 例如,当我在reddit上发布这段视频时,它通过他们的youtube嵌入式播放器完美播放 我使用以下代码示例: <WebView useWebKit={true} ref={(ref) => { this.videoPlayer = ref;}}

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

下面是一个测试它的链接:

任何帮助都将不胜感激

马克西姆


编辑:无法解决此问题的url示例:

我创建了一个web应用程序,通过视频ID加载youtube视频。我的端点是这样的:
https://mywebsite.com/ID_VIDEO_YOUTUBE

然后在我的react原生应用程序中,我只需加载我网站的URL:

<WebView
   useWebKit={true}
   ref={(ref) => { this.videoPlayer = ref;}}
   source={{uri: 'https://mywebsite.com/ID_VIDEO_YOUTUBE'}}
   scrollEnabled={false}
   domStorageEnabled={true}
   javaScriptEnabled={true}
/>
{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”,
负责人:{
链接:[{
r:'图标',
h:“/static/favicon.png”,
t:'image/png'
}]
}
}

您是否尝试将源代码设置为
http
而不是
https
?我遇到了一个类似的问题,您解决了吗?这里的问题相同。使用某些视频,而不是其他视频。让我们看看下面我的答案,这是我找到的解决此问题的唯一方法。您能否提供有关加载youtube视频的服务器端点的说明?它是坐在iframe还是?我正在尝试实现类似的功能,但使用AngularJS或AngularJS,我认为您必须创建一个
YoutubeVideoComponent
,在其中传递要加载的youtube视频的id(感谢url参数)。然后,创建一个类似于
{path:'youtube/:id',component:YoutubeVideoComponent}
的路由。我建议您使用我使用的html代码示例或类似的东西来显示一个占用所有宽度和高度的视频。最后,在react原生应用程序中,您只需通过传入要观看的youtube视频的id参数来加载url。我希望这对你来说是清楚的:)