在离子2页中将Onpar/on Resume添加到YouTube视频中

Question

我有一个小问题，我需要修复Ionic 2中的非常基本的演示Android应用。

当YouTube视频在主页上播放时，如果按下电源按钮或手机进入睡眠/锁定模式，YouTube视频将继续播放。此问题导致Google在Play商店中拒绝该应用程序，因为它们不允许在YouTube Embed上发生这种情况。

因此，如果状态再次醒来时，我需要添加一些代码以暂停视频。

。

我需要添加的功能似乎被称为Onpause和on Resume，但我不确定如何以及在何处添加代码以使此功能与此自定义YouTube代码一起使用。

这是存储库中的文件，而APK（只有3MB）仅更改空白离子2安装上的主页，您可以在其中看到问题。

github repo
github中的apk

Answer 1

我会添加评论以添加到N00B所说的内容，但我还没有50个声誉点。添加NOOBS答案并提供额外的提示。请将N00B标记为正确的答案。

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
export class page {
    currentVideoSource: SafeResourceUrl;
    constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) {
        this.currentVideoSource = this.sanitizer.bypassSecurityTrustResourceUrl("youtubeurl");
    }

现在SRC应该与IFRAME中的以下内容一起使用

[src]="currentVideoSource";

Answer 2

您应该将该URL添加到Angular2 domsanitizer异常列表中。您看到的是Angular2的安全功能，可防止人们在我们的应用中加载恶意URL。

https://angular.io/docs/ts/latest/api/platform-browser/index/domsanitizer-class.html

Answer 3

我会避免直接使用YouTube视频插件来避免您遇到的问题，您可以在此处查看有关如何在此处安装的预览视频

https://www.udemy.com/master-ionic-3-with-ionic-native-native-and-cordova-integrations

节点

ionic cordova add https://github.com/JonSmart/CordovaYoutubeVideoPlayer
npm install @ionic-native/youtube-video-player

app.module.ts

import {YoutubeVideoPlayer} from '@ionic-native/youtube-video-player'

添加到提供商列表youtubevideoplayer

home.ts

import {YoutubeVideoPlayer} from '@ionic-native/youtube-video-player'

在导出类中

constructor (private videoPlayer: YoutubeVideoPlayer ) {}
playVideo(video: Video) {
    this.videoPlayer.openVideo(video.videoId)
}

Android所需的API密钥搜索" YouTube数据API概述"

config.xml（"在允许的情况下"）

Answer 4

来自此博客文章，

它说您可以使用Apache Cordova事件听众。

Apache Cordova事件不需要安装IonicFramework的其他插件。

要注册一个事件，我们必须在我们的$ ionicplatform.ready（）方法中进行。

一些听众是

简历 - 当地平台从后台拉出应用程序时，简历事件会发射。

暂停 - 将应用程序放入后台时触发。

在线 - 应用程序在线时发射此事件，设备连接到Internet。

离线 - 应用程序脱机时触发事件，设备未连接到Internet。

在您的JS文件中，添加

angular.module(...).run(function($ionicPlatform){
        $ionicPlatform.ready(function() {
           document.addEventListener("pause", function() {
              //Code to pause the video
           }, false);
     });

有关支持活动的完整列表，请参阅Apache Cordova官方网站