当我的 Cordova 应用程序进入后台时，如何在 InAppBrowser 上暂停 YouTube 视频？

Question

我正在使用 Cordova 和 Ionic 框架开发一个 Android 应用程序。我正在使用以下代码使用 InAppBrowser 播放 YouTube 视频：

window.open('https://www.youtube.com/embed/rAiw2SXPS-4', '_self');

但是当我在播放视频时按下设备上的主页按钮时，视频并没有暂停。由于这个问题，我的应用在提交到 Google Play 后被拒绝，原因如下：

您提交的内容因启用 YouTube 视频的后台播放而被拒绝，这违反了 YouTube API 服务条款。如果此提交是对现有应用的更新，则在此更新之前发布的版本仍可在 Google Play 中使用。请修改您的应用并重新提交。更多详细信息已发送至您帐户所有者的电子邮件地址。

我搜索了一个解决方案，但没有运气。有人可以帮忙吗？

Answer 1

我也在努力寻找在设备锁定时暂停（而不是停止）正在进行的视频的完整解决方案，但没有成功。最终我通过将几个部分组合在一起找到了解决方案。

这是在设备锁定时完成 YouTube 播放器暂停的指令：

import { Directive, ElementRef, OnInit } from '@angular/core'
import { Platform } from 'ionic-angular'
import * as _ from 'lodash-es'

/* tslint:disable */
(function (apiInit) {
  let _registerYouTubeAPIIfNotAlready = function () {
    if (!window[ 'onYouTubeIframeAPIReady' ]) {
      window[ 'onYouTubeIframeAPIReady' ] = function () {
        apiInit.youTubeApiRegistered = true

        if ((typeof apiInit.callback !== "undefined") && _.isFunction(apiInit.callback)) {
          apiInit.callback()
        }
      }
    } else {
      console.error("trying to register YouTube API when it's already registered")
    }
  }

  apiInit.setupYouTubeApiOrDefault = function (callback) {
    if ((typeof callback === "undefined") || !_.isFunction(callback)) {
      _registerYouTubeAPIIfNotAlready()
      return
    }

    if(apiInit.youTubeApiRegistered){
      callback()
      return;
    }

    apiInit.callback = callback
    _registerYouTubeAPIIfNotAlready()
  }
}(window[ 'youTubeApiInit' ] = window[ 'youTubeApiInit' ] || {}))


@Directive({
  selector: "[preventYoutubePlayOnBackground]",
})
export class PreventYouTubePlayOnBackgroundDirective implements OnInit {
  public static youTubeIframeAPI = 'https://www.youtube.com/iframe_api'

  public static injectYouTubeIframeApi(): void {
    let youTubeCheckQuery = "script[src*='" + PreventYouTubePlayOnBackgroundDirective.youTubeIframeAPI + "']"

    if (!document.querySelector(youTubeCheckQuery)) {
      // from YouTube API documentation
      let tag = document.createElement('script')
      tag.src = PreventYouTubePlayOnBackgroundDirective.youTubeIframeAPI

      let firstScriptTag = document.getElementsByTagName('script')[ 0 ]
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
    }
  }

  public iframeId: string
  private youTubeIframeElm: any

  constructor(
    public elm: ElementRef,
    private platform: Platform,) {
    this.youTubeIframeElm = elm.nativeElement
    this.iframeId = this.youTubeIframeElm.getAttribute('id')
  }

  ngOnInit(): void {
    this.platform.ready().then(() => {
      PreventYouTubePlayOnBackgroundDirective.injectYouTubeIframeApi()

      window[ 'youTubeApiInit' ].setupYouTubeApiOrDefault(() => {
        this.setYouTubeApi()

        this.platform.pause.subscribe(() => {
          let player = new window[ 'YT' ].Player(this.iframeId) // TODO: add youtube API node module
          player.a.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
        })
      })
    })
  }

  private setYouTubeApi(): void {
    let url = new URL(this.youTubeIframeElm.src)

    if (!url.searchParams.get("enablejsapi")) { // enabling youTube js api to be able to create player
      let prefix = (this.youTubeIframeElm.src.indexOf("?") === -1) ? "?" : "&"
      this.youTubeIframeElm.src += prefix + "enablejsapi=true"
    }
  }
}

嵌入式 YouTube 播放器的 HTML 将是：

<iframe id="onboarding-video"
                  width="400"
                  height="300"
                  [src]="videoUrl"
                  frameborder="0"
                  allowfullscreen
                  preventYoutubePlayOnBackground
                  iframe-id="onboarding-video">
</iframe>

注意：以上代码适用于 ionic 2+，但是对于 ionic 1，您可以使用：

 (function() {
    // same kind of logic here as written in above constructor body

    $ionicPlatform.on('pause', function(event) {
      // pausing player here
    });
 }())

您还需要创建 Angular 1 样式指令，而不是上面编写的 TypeScript 指令。

Answer 2

使用 $ionicPlatform 你可以使用“on”方法：

$ionicPlatform.on('pause', function(event) {
  // pause video here
});

它基于 Cordova 暂停事件：

document.addEventListener("pause", onPause, false);

function onPause() {
    // Handle the pause event
}

请参阅 ionic 文档 here 和 cordova 文档 here。

Answer 3

调用inappbrowser的open方法时，需要在选项中设置shouldPauseOnSuspend=yes。请参阅此处的文档：https://github.com/apache/cordova-plugin-inappbrowser。

这样的事情会起作用：

window.open('http://google.com','_blank', 'shouldPauseOnSuspend=yes');