Problem with youtubevideoplayer plugin IONIC 2


#1

ERROR:
Runtime Error
Object prototype may only be an Object or null: undefined

Ionic Framework: 2.2.0
Ionic Native: 2.8.1
Ionic App Scripts: 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 6.9.5
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36

HOME.TS

import { Component } from '@angular/core';


import { NavController, ToastController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Webservice } from '../../providers/webservice';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public mensagem: any;
  public versiculo: any;
  public imagem: any;
  public youtubevideo: any;
  public mensagemdoservo: any;

constructor(public navCtrl: NavController, private sharingVar: SocialSharing, public webservice: Webservice, public toastCtrl: ToastController, private youtube: YoutubeVideoPlayer) {
    
}

ionViewWillEnter(){
  this.webservice.buscaVersiculo()
  .then((data) => {
    this.mensagem = data.mensagem;
    this.versiculo = data.versiculo;
    this.imagem = data.imagem;
    this.youtubevideo = this.youtube.openVideo('pveNYEim1Gw');
    this.mensagemdoservo = data.mensagemdoservo;
    this.presentToast("Santifique-se o Senhor Jesus Cristo está voltando... ");
  })
}

private whatsappShare(){
  this.sharingVar.shareViaWhatsApp(this.mensagem, 
  this.imagem, null)
  .then((data) => {
    
  }, (error) => {
    
  })
}

private facebookShare(){
  this.sharingVar.shareViaFacebook(this.mensagem, this.imagem, null)
  .then((data) => {

  },(error) => {
    
  })
}

public presentToast(mensagem) {
  let toast = this.toastCtrl.create({
    message: mensagem,
    position: 'top',
    showCloseButton: true,
    closeButtonText: "ok"
  });
  toast.present();
}

}

HOME .HTML

<!--<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>-->

<ion-content class="central" scroll="false">
    <div class="backTransparente">
       <div class="painelTitulo">
          <div class="titulo">
            Versículo do Dia
             <div class="subTitulo">
               by Jesus Cristo
             </div>
          </div>
       </div>

       <div class="painelPalavra">
          <div class="palavra">
            {{this.mensagem}}
          </div>
          <div class="livro">
            {{this.versiculo}}
          </div>
          <div style="position:relative;height:200px;width:100%">
            {{ this.youtube }}
          </div>
          <div class="mensagem">
            {{ this.mensagemdoservo }}
          </div>
       </div>
    </div>
    <div class="footer">
      <span class="share">Compartilhe e salve vidas:</span>
      <div class="whatsapp" (click)="whatsappShare()">
        <img src="assets/img/whatsapp.png" width="20" height="20" />
      </div>
      <!--<div class="facebook">
        <img src="assets/img/facebook.png" width="20" height="20" />
      </div>-->
    </div>
</ion-content>

#2

Clean up your ionic-native setup. Get rid of the old v2 “ionic-native” dependency and replace it with @ionic-native/core. Match up the version of that with the versions of all your @ionic-native/plugins.


#3

this.youtubevideo return [OBJECT OBJECT]

import { Component } from '@angular/core';


import { NavController, ToastController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Webservice } from '../../providers/webservice';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public mensagem: any;
  public versiculo: any;
  public imagem: any;
  public youtubevideo: any;
  public mensagemdoservo: any;
  public youtubeid: any;

constructor(public navCtrl: NavController, private sharingVar: SocialSharing, public webservice: Webservice, public toastCtrl: ToastController, private youtube: YoutubeVideoPlayer) {
    
}

ionViewWillEnter(){
  this.webservice.buscaVersiculo()
  .then((data) => {
    this.mensagem = data.mensagem;
    this.versiculo = data.versiculo;
    this.imagem = data.imagem;
    this.youtubeid = data.youtube;
    this.youtubevideo = this.youtube.openVideo(this.youtubeid);
    this.mensagemdoservo = data.mensagemdoservo;
    this.presentToast("Santifique-se o Senhor Jesus Cristo está voltando... ");
  })
}

private whatsappShare(){
  this.sharingVar.shareViaWhatsApp(this.mensagem, 
  this.imagem, null)
  .then((data) => {
    
  }, (error) => {
    
  })
}

private facebookShare(){
  this.sharingVar.shareViaFacebook(this.mensagem, this.imagem, null)
  .then((data) => {

  },(error) => {
    
  })
}

public presentToast(mensagem) {
  let toast = this.toastCtrl.create({
    message: mensagem,
    position: 'top',
    showCloseButton: true,
    closeButtonText: "ok"
  });
  toast.present();
}

}

<!--<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>-->

<ion-content class="central" scroll="false">
    <div class="backTransparente">
       <div class="painelTitulo">
          <div class="titulo">
            Versículo do Dia
             <div class="subTitulo">
               by Jesus Cristo
             </div>
          </div>
       </div>

       <div class="painelPalavra">
          <div class="palavra">
            {{this.mensagem}}
          </div>
          <div class="livro">
            {{this.versiculo}}
          </div>
          <div class="mensagem">
            <h1>Mensagem do servo</h1>
            {{ this.mensagemdoservo }}
          </div>

          {{this.youtubevideo}}
          <div style="height:100% auto;width:90%;margin-bottom:10%;padding-bottom:10%">
            <h1 class="mensagem">Vídeo do dia</h1>
            <iframe width="100%" height="275" src="https://www.youtube.com/embed/3hOeFqFXA0Y" frameborder="0" allowfullscreen></iframe>
          </div>
       </div>
    </div>
    <div class="footer">
      <span class="share">Compartilhe e salve vidas:</span>
      <div class="whatsapp" (click)="whatsappShare()">
        <img src="assets/img/whatsapp.png" width="20" height="20" />
      </div>
      <!--<div class="facebook">
        <img src="assets/img/facebook.png" width="20" height="20" />
      </div>-->
    </div>
</ion-content>

#4

…and you were expecting what, exactly?


#5

it’s work only in android(browser not working) thanks