使用 Ionic 3，有没有办法加载受 youtube api 限制的视频？

Question

我正在尝试在 Ionic 中制作一个用于播放 youtube 视频的应用程序，但是我无法让它加载受域限制的视频。在浏览器中启动 ionic 时，它在 chrome 中没有问题，但在手机上启动时，您会收到消息“此视频包含来自 ____ 的内容。它在某些网站或应用程序上被限制播放。”

我对此进行了相当广泛的研究，但所有其他解决方案都不适合我，例如在创建播放器时在 PlayerVars 中设置原始值或使用 iframe 标签本身。

在我的代码中，我尝试使用域/来源构建播放器，并使用带有 IFrame 标签本身的域/来源。这两个都不起作用。 iframe 有我上面提到的相同问题，并且 playervars 部分中的来源返回“发生错误，请稍后再试”，并且每次都会更改错误 ID。

我相信这是因为 ionic 使用无头浏览器呈现 webview 的方式和 youtube iframe javascript 代码在调用嵌入式视频时未设置来源/引荐来源。

 <iframe id="player" type="text/html" 
    src="http://www.youtube.com/embed/26yFO5lnkgU?enablejsapi=1&origin=http://www.youtube.com"
    frameborder="0"
    align="middle"
    class='frameplayer'
    width="90%" 
    height="95%"
    allowfullscreen
    autoplay="1"
    origin="http://www.youtube.com" >
    </iframe>

在构建我的播放器时也尝试过这个：

 createPlayer(videoId): void {
console.log("creating new player")
let interval = setInterval(() => {
  if ((typeof _window.YT !== 'undefined') && _window.YT && _window.YT.Player) {
    console.log("making new player...");
    this.yt_player = new _window.YT.Player('pa', {
      width: '440',
      height: '300',
      playerVars: {
        enablejsapi: 1, //origin considerations when using this
        iv_load_policy: '3',
        rel: '0',
        modestbranding: 1,
        autoplay: 1,
        controls: 0,
        origin: "http://www.youtube.com",
        widget_referrer:"http://www.youtube.com"
      },
      events: {
        onStateChange: (ev) => {
          this.onPlayerStateChange(ev);
        },
        onReady : (ev) => {
          this.playVideo(videoId);
        }
      }
    });
    clearInterval(interval);
  }
}, 100);

}

我只尝试过 origin，widget_referrer 自己尝试过，但都没有。

最近有没有人遇到过同样的问题并进行了修复？ youtube 是否让其他应用列入白名单作为批准的应用？也是我会走的路线。

Answer 1

听起来您可能遇到了 CORS 问题。

iframe API 要求您从已知网站启动，以便 YouTube 可以验证请求的来源。

鉴于您似乎是在为 Android 开发，您应该改用 Native YouTube API。

这里的离子实现： https://ionicframework.com/docs/native/youtube-video-player/