Erro in Youtube Video Player: ERROR TypeError: co.openVideo is not a function

Ionic Native
1

Hi, I was using the iframe, however, giving incompatibility with IOS, I decided to change.

I am using Ionic Video Player to watch Youtube videos to my application and it is giving the following error:

HomePage.html:10 ERROR TypeError: co.openVideo is not a function
    at Object.eval [as handleEvent] (HomePage.html:10)
    at handleEvent (core.es5.js:11914)
    at callWithDebugContext (core.es5.js:13206)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:12794)
    at dispatchEvent (core.es5.js:8814)
    at core.es5.js:9406
    at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2687)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:4140)
    at t.invokeTask (polyfills.js:3)

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public youtubevideo: any;

  playVideo() {
   this.youtubevideo = this.youtube.openVideo('pveNYEim1Gw');
  } 
  
  constructor(private youtube: YoutubeVideoPlayer) {

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    YoutubeVideoPlayer
  ]
})
export class AppModule {}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Youtube Video Player
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="openVideo()">
  <ion-icon name="play"></ion-icon>
  </button> 
</ion-content>
2

There is no openVideo in your home.ts that is triggered via [quote=“mateusdomingos, post:1, topic:98944”]
(click)=“openVideo()”
[/quote]

You have to create it if you want to use it.

1 Like
3

thank you so much. I can not believe I did not see this.

1 Like
4

In general: If the error message mentions co. you messed up in the template code :wink:

2 Likes