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) ? "?" : "&amp;"
      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>

注意：上面的代码适用于离子2+，但对于离子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
}

请参阅离子文档here和cordova文档here。

Answer 3

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

类似的事情会起作用：

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

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

3 个答案: