moust / cordova-plugin-videoplayer

A Codova plugin to play video with the native MediaPlayer on Android devices.
MIT License
139 stars 102 forks source link

cordova_not_available ionic ios #78

Open eduardogq opened 1 year ago

eduardogq commented 1 year ago

The error appears when I try to play the video

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx'; //Import

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        VideoPlayer //Import
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

home.page.ts

import { Component } from '@angular/core';
import { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx'; //Import

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})

export class HomePage {
    url: any;
    constructor(
        public videoPlayer: VideoPlayer //Import
    ) {
        console.log("HomePage Cargo...");
    }

    playVideo(){
        this.url="../assets/videos/1.mp4";
        alert(this.url);

        this.videoPlayer.play('../assets/videos/1.mp4').then(() => {
            alert('video played');
        }).catch(err => {
            alert('Aqui esta el error: '+JSON.stringify(err));
        });
    }

    stopVideo(){
        alert("stop video");
        this.videoPlayer.close();
    }
}

home.page.html

<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-title>
        Blank
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
        <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
    </ion-header>

    <div id="container">
        <video width="400" autoplay loop class="embed-responsive-item" controls>
            <source src="{{url}}" type="video/mp4">
        </video>
        <button ion-button (click)="playVideo()">Play Video </button>
        <button ion-button (click)="stopVideo()">Stop playing Video</button>
    </div>
</ion-content>

And after clicking the play button, this is what happens when the console throws the error

Captura de Pantalla 2022-10-12 a la(s) 22 26 19