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

时间:2019-04-06 10:19:46

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

我想将YouTube视频嵌入博览会应用程序时遇到问题,当我单击“播放”按钮时,有时会收到此消息:

unavaible_message_from_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上打开视频: screenshot_disable_embedded

这里是测试链接:https://snack.expo.io/@maxgfr/youtube-embedded

任何帮助将不胜感激

马克西姆

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

1 个答案:

答案 0 :(得分:0)

要解决此问题:

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

然后在我的本地应用程序中,我只需要加载网站的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>