Добавление OnPause/onResume к видео Youtube в пределах страницы Ионный 2

Question

У меня есть небольшая проблема мне нужно фиксировать на очень простой демо-приложение для Android в ионическом 2.

Когда видео Youtube играет на домашней странице, если вы нажмите кнопку питания или телефон перейдет в режим сна/блокировки, когда видео Youtube продолжает воспроизводиться. Эта проблема заставляет Google отклонять приложение в Play Маркете, поскольку они не позволяют это произойти на Youtube.

Поэтому мне нужно добавить код, чтобы приостановить видео, если состояние изменяется и возобновляется при повторном пробуждении.

Функция, которую мне нужно добавить, кажется, называется onPause и onResume, но я не уверен, как и где добавить код, чтобы эта функция работала с этим пользовательским кодом Youtube.

Вот файлы в репо и APK (всего 3 Мб), просто перейдите на домашнюю страницу на пустой ионной установке 2, где вы можете увидеть проблему в действии.

Github Repo
APK in Github

Answer 1

Я бы избежать проблем, вы испытываете, идя прямо на Youtube Video Plugin вы можете увидеть предварительный просмотр видео о том, как установить его здесь

https://www.udemy.com/master-ionic-3-with-ionic-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) 
} 

ключ API требуется для Android Поиск "Youtube Data API Обзор"

config.xml ("под-разрешения намерения")

Answer 2

следует добавить, что URL-адрес в список исключений Angular2 DomSanitizer. То, что вы видите, - это функция безопасности Angular2, которая запрещает людям загружать вредоносные URL-адреса в нашем приложении.

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

Answer 3

Я хотел бы добавить комментарий, чтобы добавить к тому, что 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"); 
    } 

Теперь ЦСИ должны работать с чем-то вроде следующего в IFRAME

[src]="currentVideoSource"; 

Answer 4

blog post Из этого,

Он говорит, что вы можете использовать слушателей событий Apache Кордова.

События Apache Cordova не требуют дополнительной установки плагина для IonicFramework.

Чтобы зарегистрировать событие, мы должны сделать это в нашем методе $ ionicPlatform.ready().

Некоторые из слушателей

резюме - Пожары событий резюме, когда родная платформа тянет приложение от фона.

pause - Событие срабатывает, когда приложение помещается в фоновом режиме.

online - Это событие срабатывает, когда приложение подключается к сети, и устройство подключается к Интернету.

- Событие срабатывает, когда приложение переходит в автономный режим, а устройство не подключено к Интернету.

В файле JS, добавьте

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

Полного список поддерживаемых событий, обратитесь к Apache Cordova official website