Player not working for ionic 4 app

[lapamplemousse]

Thank you for providing this player is excellent!!

I was using the old version of the plugin with my ionic 4 app and was working fine except when I rotated the screen it would restart the video.

I know this was fixed in the newer update so I updated the video player yesterday. and the player does not appear at all. I do not get any errors I am just faced with an empty screen.

Have followed the instructions to the tee only thing I cannot seem to do is add the tag in @component @Component({ tag: 'my-page', styleUrls: ['./my-page.page.scss'], })

I get the following error

   Argument of type '{ tag: string; styleUrls: string[]; }' is not assignable to parameter of type 'Component'.
   Object literal may only specify known properties, and 'tag' does not exist in type 'Component'.ts(2345)

So I leave the tag out.

Another thing I notice is different is my this.url does not use https://... it goes directly to the folder on my app file. This is how it worked on the previous version.

this._url = "assets/video/cival.mp4"

[jepiqueau]

@lapamplemousse Hi thanks for using the plugin. Are you using it in a Web app and/or Native Apps? I assume that your page component from where you call the plugin is name my-page meaning that in your my-page.html file you must have somewhere

<ion-content>
...

  <!-- Mandatory id="fullscreen" -->
  <div id="fullscreen" slot="fixed">
  </div>

...

</ion-content>

Now in your my-page.ts you must have:

import { Plugins, DeviceInfo } from '@capacitor/core';
import 'capacitor-video-player';

const { CapacitorVideoPlayer, Device} = Plugins;

@Component({
  selector: 'my-page',
  templateUrl: './my-page.page.html',
  styleUrls: ['./my-page.page.scss'],
})
export class MyPage {
  private _videoPlayer: any;
  private _url: string;
  private _platform: string;

 ionViewWillEnter() {
      this._videoPlayer = CapacitorVideoPlayer;
      const info = await Device.getInfo();
      this._platform = info.platform;
      if(this._platform === "ios" || this._platform  === "android") {
          this.url = "public/assets/video/cival.mp4"
      } else {
          this.url = "assets/video/cival.mp4"
      }
 }
 async ionViewDidEnter() {
  ...

           const res:any  = await this._videoPlayer.initPlayer({mode:"fullscreen",url:this._url, playerId:"fullscreen",componentTag:"my-page"});
 ...
}

This should work, i did not test it as i am not using Ionic4 anymore. you can have a look at https://github.com/jepiqueau/angular-videoplayer-app-starter which is a stater app for Ionic5/Angular

Do not hesitate to contact me if you still have an issue

[lapamplemousse]

Thanks for the speedy reply mate! This got it working on the web the difference being the selector in the component. The automated selector when I generate a page is "app-my-page" removing the "app-" fixed it.

However I am encountering issues when trying to run in android studio. After amending the MainActivity.java as seen in the instruction, I then try and run the project.

In the Java compiler I get the following errors

 error: cannot find symbol class ActivityCompat
 error: package android.support.v7.app does not exist
 error: cannot find symbol class AppCompatActivity
 error: cannot find symbol variable ActivityCompat

I am guessing is a similar problem found here for the second answer. It is trying to get me to update to androidX

https://stackoverflow.com/questions/23330816/error-package-android-support-v7-app-does-not-exist

I have added:

   android.enableJetifier=true
   android.useAndroidX=true

to gradle properties.

   implementation 'androidx.appcompat:appcompat:1.2.0'

to my dependencies

    import androidx.appcompat.app.AppCompatActivity;

to my main activity. Still the error remains. I should note in my main activity the import is greyed out like it is not used, so it is not surprising the error continues

[jepiqueau]

@lapamplemousse you have to be in androidx the build.gradle (Project: android) should be

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.1'
        classpath 'com.google.gms:google-services:4.3.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

apply from: "variables.gradle"

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

the variables.gradle

ext {
    minSdkVersion = 21
    compileSdkVersion = 29
    targetSdkVersion = 29
    androidxAppCompatVersion = '1.1.0'
    androidxCoreVersion =  '1.2.0'
    androidxMaterialVersion =  '1.1.0-rc02'
    androidxBrowserVersion =  '1.2.0'
    androidxLocalbroadcastmanagerVersion =  '1.0.0'
    firebaseMessagingVersion =  '20.1.2'
    playServicesLocationVersion =  '17.0.0'
    junitVersion =  '4.12'
    androidxJunitVersion =  '1.1.1'
    androidxEspressoCoreVersion =  '3.2.0'
    cordovaAndroidVersion =  '7.0.0'
}

the build.gradle (Module:app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "com.jeep.app.ioniccapacitorvideoplayer"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

repositories {
    flatDir{
        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
    implementation project(':capacitor-android')
    testImplementation "junit:junit:$junitVersion"
    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
    implementation project(':capacitor-cordova-android-plugins')
}

apply from: 'capacitor.build.gradle'

try {
    def servicesJSON = file('google-services.json')
    if (servicesJSON.text) {
        apply plugin: 'com.google.gms.google-services'
    }
} catch(Exception e) {
    logger.warn("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
}

the gradle.properties

# Project-wide Gradle settings.

# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.

# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html

# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
org.gradle.jvmargs=-Xmx1536m

# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true

# Supports AndroidX
android.useAndroidX=true
android.enableJetifier=true

theMainActivity.java

package YOUR_PACKAGE;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import com.jeep.plugin.capacitor.CapacitorVideoPlayer;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(CapacitorVideoPlayer.class);

    }});
  }
}

Hope this will help you making it working

[lapamplemousse]

Yup that is all sorted thanks for your help I am extremely grateful.

[jepiqueau]

@lapamplemousse Great !!!