Angular 8 和 Cordova - ngx-youtube-player 无法在 Android 上运行答案

【问题标题】：Angular 8 & Cordova - ngx-youtube-player not working on AndroidAngular 8 和 Cordova - ngx-youtube-player 无法在 Android 上运行
【发布时间】：2020-09-12 18:50:58
【问题描述】：

我正在使用 Angular 8，为了播放和控制 Youtube 视频，我正在使用 ngx-youtube-player。在浏览器上一切正常。使用 Cordova 在 Android 上构建和运行应用程序时，不会显示 Youtube 视频。我尝试以常规方式嵌入视频，并且它正在工作（我将 Cordova 配置中的 youtube url 列入白名单）。

这是我的代码：（在 android 上显示第一个视频，但第二个不显示）

<div class="container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/1ozGKlOzEVc" frameborder="0" allowfullscreen></iframe>
  <youtube-player videoId="eXvBjCO19QY" [width]="600" [height]="600"></youtube-player>
</div>

在尝试调试应用程序时，我在加载时收到以下错误：

www.youtube.com/iframe_api:1 加载资源失败：网络::ERR_INVALID_URL

当尝试从我的组件控件开始播放视频时，我当然会遇到参考错误

ERROR ReferenceError: YT 未定义在 t.playPauseSong (main.e0ff7e04d5915898ed07.js:1) 在 Object.handleEvent (main.e0ff7e04d5915898ed07.js:1) 在 Object.handleEvent (main.e0ff7e04d5915898ed07.js:1) 在 Object.handleEvent (main.e0ff7e04d5915898ed07.js:1) 在 Ti (main.e0ff7e04d5915898ed07.js:1) 在 main.e0ff7e04d5915898ed07.js:1 在 e.i [as _next] (main.e0ff7e04d5915898ed07.js:1) 在 e.__tryOrUnsub (main.e0ff7e04d5915898ed07.js:1) 在 e.next (main.e0ff7e04d5915898ed07.js:1) 在 e._next (main.e0ff7e04d5915898ed07.js:1)

在我的 Android 应用上使用开发人员工具时，ngx-youtube-player 包的组件中似乎缺少 iframe 元素

Android HTML elements

在浏览器上是这样的： Browser HTML elements

我需要做什么才能使 ngx-youtube-player 中的视频正常工作？

谢谢

【问题讨论】：

标签： android angular cordova youtube angular8

【解决方案1】：

要让 youtube-player 正常工作，我们必须先下载 iframe_api。

在您使用youtube-player 的代码中添加此代码

ngOnInit(): void {
  const target = 'https://www.youtube.com/iframe_api'

  if (!isScriptLoaded(target)) {
    const tag = document.createElement('script')
    tag.src = target
    document.body.appendChild(tag)
  }
}

isScriptLoaded(target: string): boolean {
  return document.querySelector('script[src="' + target + '"]') ? true : false
}

我正在控制是否已经添加了脚本
如果没有，则将脚本添加到代码中

【讨论】：