Question

我尝试在Ionic上制作应用程序来播放YouTube视频，但我无法加载以加载域名限制的视频。在浏览器中启动离子时，它在chrome中没有问题，但在手机上启动时会收到消息＆＃34;此视频包含来自____的内容。它限制在某些网站或应用程序上播放。＆＃34;

我已经对此进行了广泛的研究，并且所有其他解决方案对我来说都不起作用，例如在创建播放器或使用iframe标签本身时在PlayerVars中设置原始值。

在我的代码中，我尝试构建一个具有域/来源的播放器，并使用带有IFrame标签的域/来源。这两个都不起作用。 iframe上面提到了同样的问题，播放器部分中的来源是＆＃34;发生了错误，请稍后重试＆＃34;以及每次都更改的错误ID。

我认为这是因为离子使用无头浏览器渲染webview和youtube iframe javascript代码在调用嵌入视频时没有设置origin / referrer的方式。

 <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);

}

我已尝试过原始版本，而widget_referrer本身也没有尝试过。

最近是否有人遇到过同样的问题和修正案？ youtube是否会将其他应用列入已批准的应用白名单？也是一条我会走下去的路线。

Answer 1

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

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

鉴于您似乎正在为Android开发，您应该使用原生YouTube API。

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

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

1 个答案: