Error in Youtube Video Player: ERROR TypeError: Object(...) is not a function

Ionic Native
1

Hi,
Im using Ionic Video Player to watch Youtube channel videos on my application. The list of videos works fine but when i try to play it the emulator show me this error on this line:

<button ion-button icon-left clear small (click)=“playVideo($event, post)”>

TypeError: Object(...) is not a function
    at YoutubeVideoPlayer.openVideo (http://localhost:8100/build/vendor.js:84199:141)
    at YoutubePage.webpackJsonp.469.YoutubePage.playVideo (http://localhost:8100/build/4.js:131:22)
    at Object.eval [as handleEvent] (ng:///YoutubePageModule/YoutubePage.ngfactory.js:27:27)
    at handleEvent (http://localhost:8100/build/vendor.js:13607:172)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15092:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:14679:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:10056:25)
    at http://localhost:8100/build/vendor.js:10670:38
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:36952:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)

youtube.ts

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Videos</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>  
  <div *ngFor= "let post of posts">
    <ion-card>
      <img src="{{ post.snippet.thumbnails.high.url }}">
      <ion-card-content>
        <ion-card-title>
          <h4>{{ post.snippet.title }}</h4>
        </ion-card-title>
        <button ion-button icon-left clear small (click)="playVideo($event, post)">
          <ion-icon name="play">
            <div>Play Video</div>  
          </ion-icon>
        </button>
      </ion-card-content>
    </ion-card>
  </div>
    <!--  display error -->
    <div style="width:100%; height:100%; margin-top:50%;" *ngIf="no_result">
      <h1>Error recuperando videos</h1>
    </div>
</ion-content>>

youtube.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player/ngx';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-youtube',
  templateUrl: 'youtube.html',
})
export class YoutubePage {

  // youtube channel Id
  channelID: string = 'UC7Nfr13PyP84jWgU5FS9LGg';

  //maximum number of video the search will return
  maxResults: string = '5';

  //incase if you want to use pagination
  pageToken: string;

  // youtube api key
  googleToken: string = 'AIzaSyCa_RLmwvsOYU-ql0K2jAHCEXMtlWOA90A';

  //the term we will use for the search
  //searchQuery: string = 'Pst. David Olusegun';

  //array that will contain the videos after they have been retrieved
  posts: any = [];

  // boolean to hide/show the error message
  no_result: boolean = false;

  loader: any;

  constructor(public loading: LoadingController, public http: Http, private youtube: YoutubeVideoPlayer, public navCtrl: NavController, public navParams: NavParams) {  

    // creates a loader
    this.loader = this.loading.create({
      // the content of the loader during its operations is specified here
      content: 'Cargando videos'
    });

    // makes loader visible
    this.loader.present().then(() => {
      this.fetchData();
    });
  
  } 

  fetchData() {

    //api to retrieve videos
    let url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=' +
    this.channelID + '&type=video&order=date&maxResults=' +
    this.maxResults + '&key=' + this.googleToken;

    // if you are interesting on pagination
    if (this.pageToken) {
        url +=  '&pageToken=' + this.pageToken;
    }

    this.http.get(url).map(res => res.json()).subscribe(data => {
      console.log(data.items);
      
    // populate post array  with the response
    this.posts = this.posts.concat(data.items);
    },

      // if error ocurs
    (error => {
      // show the error message
      this.no_result= true;

      //dismiss the loader
      this.loader.dismiss();
    }),

    // if sucessfully
    () => {
        this.loader.dismiss();
    });

  }

  playVideo (e, post){

    console.log(post);

    this.youtube.openVideo(post.id);

  }

}

Any ideas how to solve it?

2

Any success with fixing this?