jepiqueau / capacitor-video-player Goto Github PK

I use capacitor 2.0.0 and on android it gives me error and i think it is because not supporting androidx

When i try and build with android i get a bunch of errors. I've followed the guide exactly.

When i try to play a base64 video url on ios the plugin doesn't play it and the console send this error "file Path not implemented" but the url path is implemented with a base64.

error log:
⚡️ To Native -> CapacitorVideoPlayer initPlayer 36994010
⚡️ TO JS {"result":false,"method":"initPlayer","message":"filePath not implemented"}

npm version:
-> v12.18.3
default -> 12.18.3 (-> v12.18.3)

angular version:
Angular CLI: 9.1.9
Node: 12.18.3
OS: darwin x64

Angular: 9.1.11
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.9
@angular-devkit/build-angular 0.901.9
@angular-devkit/build-optimizer 0.901.9
@angular-devkit/build-webpack 0.901.9
@angular-devkit/core 9.1.9
@angular-devkit/schematics 9.1.9
@angular/animations 9.1.12
@angular/cdk 9.2.4
@angular/cli 9.1.9
@angular/fire 6.0.2
@angular/material 9.2.4
@ngtools/webpack 9.1.9
@schematics/angular 9.1.9
@schematics/update 0.901.9
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

ionic version:
5.4.16

plugin version:
capacitor-video-player (2.4.7)

Appreciate any help on this.

Thanks.

android studio error message when initPlayer() is called:

E/Capacitor: Serious error executing plugin
    java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Method.invoke(Native Method)
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99)
        at com.getcapacitor.Bridge$1.run(Bridge.java:521)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
     ...
     Caused by: java.lang.StringIndexOutOfBoundsException: length=0; index=4
        at java.lang.String.substring(String.java:2060)
        at com.jeep.plugin.capacitor.CapacitorVideoPlayer.getFilePath(CapacitorVideoPlayer.java:163)
        at com.jeep.plugin.capacitor.CapacitorVideoPlayer.initPlayer(CapacitorVideoPlayer.java:134)
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99)
        ...

my code:

import { Component, Input, OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';
import * as WebVPPlugin from 'capacitor-video-player';
import { CapacitorVideoPlayerPlugin } from 'capacitor-video-player';
const { CapacitorVideoPlayer, Device } = Plugins;

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss'],
})
export class VideoComponent implements OnInit {

  @Input() src: string;
  private videoPlayer: CapacitorVideoPlayerPlugin;

  constructor() { }

  async ngOnInit() {
    // define the plugin to use
    const info = await Device.getInfo();
    if (info.platform === 'ios' || info.platform === 'android') {
      this.videoPlayer = CapacitorVideoPlayer;
    } else {
      this.videoPlayer = WebVPPlugin.CapacitorVideoPlayer;
    }
    // add listeners to the plugin
    // this._addListenersToPlayerPlugin();
  }

  public async play() {
    const res: any = await this.videoPlayer.initPlayer({
      mode: 'fullscreen',
      url: 'http://techslides.com/demos/sample-videos/small.mp4',
      playerId: 'fullscreen',
      componentTag: 'app-video'
    });
  }

}

Can the background mode be implemented for IOS?

I have a video that is dowloaded to the external storage in the path /storage/emulated/0/Android/data/org.cordova.quasar.app/files/downloads/ppi_demo/ppi_demo_1.mp4 how to play this file.

Please add feature to play videos from device local storage, currently it's supported. Thanks!

@jepiqueau In my application i am storing video files in External storage which is in storage/emulated/0/Android/data/PACKAGE_NAME/files/my_folder/1.mp4. I need to play the 1.mp4 using this capacitor-video-plugin version 3.0. So far i got to know that it can play videos from internal storage. Is there any support to play the content from external storage ?

Would it be possible to add a fullscreen method? I would like to trigger fullscreen video from my app on embed video.
I can imagine this isn't technically possible but maybe it is :D

Is there any other methods available?

For example, is it possible to know when the video has finished? Stop or pause the video?

Thanks.

no description needed

Hello, at first nice plugin,

we tested your video player first on web, and we see do you always create a new video element always in fullscreen mode.

In this way we can not use embedded videos, like multiple videos on one screen.

We think you could use capVideoPlayerOptions to pass an already existing video element? What do you think about it?

Not sure, we are not an expert on android/ios, but how is it on native system? Is there possible to use native video player for multiple videos on the same screen, like youtube?

Hello! I'm having trouble with playback of file created by Capacitor.convertFileSrc() but only on iOS. The message I get back from the initPlayer is "filePath is not implemented". The path of these files on iOS begins with capacitor:// rather than http://, which I believe to be the root of the problem but was unable to figure out a workaround.

Any suggestions or ideas for a fix? Or possibly a different way that I should create my webpath for this plugin?

Thanks for any help! Here is my code:

newpath =  /private/var/mobile/Containers/Data/Application/[app-id]/[file].MOV

await videoPlayer.initPlayer({
  url: Capacitor.convertFileSrc(newpath), // capacitor://localhost/_capacitor_file_/private/var/mobile/Containers/Data/Application/[app-id]/[file].MOV
  playerId: 'fullscreen', 
  mode: "fullscreen",
  componentTag: "div"
});

this player works great for videos from AWS S3. What would it take to add support for AWS streaming?

URL example for AWS Streaming
https://fdhsfhsrfhfgh!!?.data.mediastore.ap-southeast-2.amazonaws.com/p/index.m3u8

Thank you for this plugin, however, it always crashes with this error.
I just cannot figure out what is wrong? I've spent 2 days with it and I'm running out of idea.

I'm only running it on Android.

This is the error I'm getting from logcat whenever I call the initPlayer

2021-07-17 13:51:34.574 2488-4658/io.socialvibes.app E/Capacitor: Serious error executing plugin
java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99)
at com.getcapacitor.Bridge$1.run(Bridge.java:542)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:246)
at android.os.HandlerThread.run(HandlerThread.java:67)
Caused by: java.lang.StringIndexOutOfBoundsException: length=0; index=4
at java.lang.String.substring(String.java:2060)
at com.jeep.plugin.capacitor.CapacitorVideoPlayer.getFilePath(CapacitorVideoPlayer.java:163)
at com.jeep.plugin.capacitor.CapacitorVideoPlayer.initPlayer(CapacitorVideoPlayer.java:134)
at java.lang.reflect.Method.invoke(Native Method) 
at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99) 
at com.getcapacitor.Bridge$1.run(Bridge.java:542) 
at android.os.Handler.handleCallback(Handler.java:938) 
at android.os.Handler.dispatchMessage(Handler.java:99) 
at android.os.Looper.loop(Looper.java:246) 
at android.os.HandlerThread.run(HandlerThread.java:67) 
2021-07-17 13:51:34.575 2488-4658/io.socialvibes.app E/AndroidRuntime: FATAL EXCEPTION: CapacitorPlugins
Process: io.socialvibes.app, PID: 2488
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at com.getcapacitor.Bridge$1.run(Bridge.java:551)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:246)
at android.os.HandlerThread.run(HandlerThread.java:67)
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99)
at com.getcapacitor.Bridge$1.run(Bridge.java:542)
at android.os.Handler.handleCallback(Handler.java:938) 
at android.os.Handler.dispatchMessage(Handler.java:99) 
at android.os.Looper.loop(Looper.java:246) 
at android.os.HandlerThread.run(HandlerThread.java:67) 
Caused by: java.lang.StringIndexOutOfBoundsException: length=0; index=4
at java.lang.String.substring(String.java:2060)
at com.jeep.plugin.capacitor.CapacitorVideoPlayer.getFilePath(CapacitorVideoPlayer.java:163)
at com.jeep.plugin.capacitor.CapacitorVideoPlayer.initPlayer(CapacitorVideoPlayer.java:134)
at java.lang.reflect.Method.invoke(Native Method) 
at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99) 
at com.getcapacitor.Bridge$1.run(Bridge.java:542) 
at android.os.Handler.handleCallback(Handler.java:938) 
at android.os.Handler.dispatchMessage(Handler.java:99) 
at android.os.Looper.loop(Looper.java:246) 
at android.os.HandlerThread.run(HandlerThread.java:67) 

My page ts:

async ngOnInit() {
this._videoPlayer = CapacitorVideoPlayer;
}

async ionViewDidEnter() {

var url = 'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4'

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

console.log("res " + JSON.stringify(res));

}

My html:

´´<ion-content> ´´<div id="fullscreen" slot="fixed"></div> ´´</ion-content>

Is there anything I have missed?

Hi @jepiqueau,
awesome work, but i think that can exist troubles with android 6 (i know that is obsolete, but you know, requirements...)

you know if is a different url schema on this version?

Thanks so much

In iOS, getCurrentTime value Always will be 0

Hi there, love this plugin!

I'm trying to get the video to autoplay. According to the browser rules it has to be muted.

Trying the regular old JS way but still getting blocked.

 let video = document.querySelector('video');
      video.defaultMuted = true;
      video.autoplay = true;

Is there a plugin-specific way to do this?

Thanks

I am trying to play a HLS video (m3u8) which requires credentials (signed cookies). Is there a way to set the authorisation header of the xhr when initialising or playing the video player?

I can get this plugin to work on iOS, but on Android I get the following:

YouTubeAndroidPlayerAPI: Embed config is not supported in RemoteEmbeddedPlayer

When I try and play the video in Android studio I am getting the following problem:

When trying to import the capacitor video player, I am getting the following error "Cannot resolve symbol jeep" in the following line in main activity
import com.jeep.plugin.capacitor.videoplayer.CapacitorVideoPlayer;

Any plans on supporting background videos?

Seems to be quite easy for iOS: https://developer.apple.com/documentation/avfoundation/media_assets_playback_and_editing/creating_a_basic_video_player_ios_and_tvos/playing_audio_from_a_video_asset_in_the_background

In my special case we are streaming music videos which is (at least on iOS) working perfectly and it would be nice to keep the audio (or video via Airplay) running when I switch to another app.

hello , please if you can update your play with new Feature ( Double tap to screen to forward 10 Sec)

Hi, developer.

Is there a way to disable the progress-bar in videos for ios?

I would like to have a video player with the original controls attribute without the progress-bar.
Is there any best solution?

Thanks.

in MainActivity.java
import com.jeep.plugin.capacitor.CapacitorVideoPlayer; // Cannot resolve symbol 'jeep'

My screen is falling asleep while the video is playing. So I have to keep touching it to keep the screen bright and prevent it from turning off al together. are there any fixes for this?

Need to add youtube url with bypass dom santizer

Is there any way to destroy all the listeners attached to a player?

I have this problem.

I have a few different pages, and in everyone, I have one or more players. Sometimes (tested on Android) it happens that even if I close the video or click the back button the video still playing. I solve adding in the ionViewWillLeave a call to this._videoPlayer.stopAllPlayers();, but this only put the player in stop instead of destroying it.

For example, in a web page, if I play a video, then put the player in the picture in picture mode and then go back an trigger the ionViewWillLeave function, the video still stay in pip and eventually (if I click) playing.

I also notice that on Android, the video doesn't start in fullscreen.

When playing the video on android, if the orientation is changed from portrait to landscape the video will start from the beginning

Hi, I've been using this plugin with an app build on Ionic with Capacitor 2 and it works great, by far this is the best option I've found. However, I decided to migrate the app to capacitor 3 because it helps with various aspects of my app, so when doing the migration I also updated this plugin to version "3.0.0-rc.1" and when I try to play a video, it keeps crashing and I have no idea what is happening. My code is as follows:

My imports
import { Capacitor } from '@capacitor/core';
import { CapacitorVideoPlayer } from 'capacitor-video-player';
import * as PluginsLibrary from 'capacitor-video-player';

And this is how I use it:

All I'm able to see in the console when I inspect my device is this:

After that, the app closes on my Android phone (Xiaomi with android 10)

I saw in the documentation this:
`import { Capacitor } from '@capacitor/core';
import { CapacitorVideoPlayer } from 'capacitor-video-player';

export const setVideoPlayer = async (): Promise=> {
const platform = Capacitor.getPlatform();
return {plugin:CapacitorVideoPlayer, platform};
};`

But I have no idea how I'm supposed to use that. Is this plugin compatible with capacitor 3? Any help is greatly appreciated

Is react with ionic supported? If yes are there any examples? I tried modifying the angular code. Couldn't get it to work.

Any hints/help would be very appreciated

Hi, in Xcode when i lunch the application in the simulator and i try to close the application is throwing this error:

Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file ..node_modules/capacitor-video-player/ios/Plugin/Plugin.swift, line 37
2020-06-07 10:04:29.200253-0300 App[50972:939203] Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file ../node_modules/capacitor-video-player/ios/Plugin/Plugin.swift, line 37.

Do you know what is the reason for this error or how can i solve it?

Plugin is throwing error on android, after adding below line in the MainActivity class with proper import. working with web support.

add(CapacitorVideoPlayer.class);

Below is the error, kindly suggest how to fix.

2020-07-26 00:59:25.864 6011-6011/com.mydomain E/FragmentManager: No view found for id 0x7f0800a2 (com.mydomain:id/frameLayout) for fragment FullscreenExoPlayerFragment{973798c #1 id=0x7f0800a2} 2020-07-26 00:59:25.864 6011-6011/com.mydomain E/FragmentManager: Activity state: 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: Local Activity 6eae527 State: 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mResumed=true mStopped=false mFinished=false 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mChangingConfigurations=false 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mCurrentConfig={1.0 310mcc260mnc [en_US] ldltr sw392dp w392dp h713dp 440dpi nrml long port finger qwerty/v/v -nav/h winConfig={ mBounds=Rect(0, 0 - 1080, 2028) mAppBounds=Rect(0, 0 - 1080, 2028) mWindowingMode=fullscreen mActivityType=standard} s.37} 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mLoadersStarted=true 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: Active Fragments in 37b98d5: 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: #0: ReportFragment{def28ea #0 androidx.lifecycle.LifecycleDispatcher.report_fragment_tag} 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mFragmentId=#0 mContainerId=#0 mTag=androidx.lifecycle.LifecycleDispatcher.report_fragment_tag 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mState=5 mIndex=0 mWho=android:fragment:0 mBackStackNesting=0 2020-07-26 00:59:25.865 6011-6011/com.mydomain E/FragmentManager: mAdded=true mRemoving=false mFromLayout=false mInLayout=false 2020-07-26 00:59:25.866 6011-6011/com.mydomain E/FragmentManager: mHidden=false mDetached=false mMenuVisible=true mHasMenu=false 2020-07-26 00:59:25.866 6011-6011/com.mydomain E/FragmentManager: mRetainInstance=false mRetaining=false mUserVisibleHint=true 2020-07-26 00:59:25.866 6011-6011/com.mydomain E/FragmentManager: mFragmentManager=FragmentManager{37b98d5 in HostCallbacks{c47e7db}} 2020-07-26 00:59:25.866 6011-6011/com.mydomain E/FragmentManager: mHost= 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: android.app.Activity$HostCallbacks@c47e7db 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: Child FragmentManager{1a4a278 in ReportFragment{def28ea}}: 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: FragmentManager misc state: 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mHost=android.app.Activity$HostCallbacks@c47e7db 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mContainer=android.app.Fragment$1@d69ed51 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mParent=ReportFragment{def28ea #0 androidx.lifecycle.LifecycleDispatcher.report_fragment_tag} 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mCurState=5 mStateSaved=false mDestroyed=false 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: #1: FullscreenExoPlayerFragment{973798c #1 id=0x7f0800a2} 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mFragmentId=#7f0800a2 mContainerId=#7f0800a2 mTag=null 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mState=1 mIndex=1 mWho=android:fragment:1 mBackStackNesting=0 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mAdded=true mRemoving=false mFromLayout=false mInLayout=false 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mHidden=false mDetached=false mMenuVisible=true mHasMenu=false 2020-07-26 00:59:25.867 6011-6011/com.mydomain E/FragmentManager: mRetainInstance=false mRetaining=false mUserVisibleHint=true 2020-07-26 00:59:25.868 6011-6011/com.mydomain E/FragmentManager: mFragmentManager=FragmentManager{37b98d5 in HostCallbacks{c47e7db}} 2020-07-26 00:59:25.868 6011-6011/com.mydomain E/FragmentManager: mHost=android.app.Activity$HostCallbacks@c47e7db 2020-07-26 00:59:25.868 6011-6011/com.mydomain E/FragmentManager: Added Fragments: 2020-07-26 00:59:25.868 6011-6011/com.mydomain E/FragmentManager: #0: 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: ReportFragment{def28ea #0 androidx.lifecycle.LifecycleDispatcher.report_fragment_tag} 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: #1: FullscreenExoPlayerFragment{973798c #1 id=0x7f0800a2} 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: FragmentManager misc state: 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mHost=android.app.Activity$HostCallbacks@c47e7db 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mContainer=android.app.Activity$HostCallbacks@c47e7db 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mCurState=5 mStateSaved=false mDestroyed=false 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: ViewRoot: 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mAdded=true mRemoved=false 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mConsumeBatchedInputScheduled=false 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mConsumeBatchedInputImmediatelyScheduled=false 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mPendingInputEventCount=0 2020-07-26 00:59:25.869 6011-6011/com.mydomain E/FragmentManager: mProcessInputEventsScheduled=false 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: mTraversalScheduled=false mIsAmbientMode=false 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: android.view.ViewRootImpl$NativePreImeInputStage: mQueueLength=0 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: android.view.ViewRootImpl$ImeInputStage: mQueueLength=0 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: android.view.ViewRootImpl$NativePostImeInputStage: mQueueLength=0 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: Choreographer: 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: mFrameScheduled=true 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: mLastFrameTime=62552453 (15 ms ago) 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: View Hierarchy: 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: DecorView@a0ee9b6[MainActivity] 2020-07-26 00:59:25.870 6011-6011/com.mydomain E/FragmentManager: android.widget.LinearLayout{c5326b7 V.E...... ........ 0,0-1080,2028} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: android.view.ViewStub{dbd6e24 G.E...... ......I. 0,0-0,0 #102018a android:id/action_mode_bar_stub} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: android.widget.FrameLayout{50f0d8d V.E...... ........ 0,66-1080,2028} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: androidx.appcompat.widget.FitWindowsLinearLayout{597eb42 V.E...... ........ 0,0-1080,1962 #7f08002f app:id/action_bar_root} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: androidx.appcompat.widget.ViewStubCompat{2697753 G.E...... ......I. 0,0-0,0 #7f08003a app:id/action_mode_bar_stub} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: androidx.appcompat.widget.ContentFrameLayout{6754890 V.E...... ........ 0,0-1080,1962 #1020002 android:id/content} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: androidx.coordinatorlayout.widget.CoordinatorLayout{b6bf589 V.E...... ........ 0,0-1080,1962} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: android.webkit.WebView{3be5db4 VFEDHVC.. .F...... 0,0-1080,1962 #7f080155 app:id/webview} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: android.view.View{2bd798e V.ED..... ........ 0,2028-1080,2160 #1020030 android:id/navigationBarBackground} 2020-07-26 00:59:25.871 6011-6011/com.mydomain E/FragmentManager: android.view.View{78a35af V.ED..... ........ 0,0-1080,66 #102002f android:id/statusBarBackground} 2020-07-26 00:59:25.877 6011-6011/com.mydomain E/FragmentManager: Looper (main, tid 2) {db139e9} 2020-07-26 00:59:25.877 6011-6011/com.mydomain E/FragmentManager: (Total messages: 0, polling=false, quitting=false) 2020-07-26 00:59:25.877 6011-6011/com.mydomain E/FragmentManager: Autofill Compat Mode: false 2020-07-26 00:59:25.877 6011-6011/com.mydomain E/FragmentManager: AutofillManager: 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: sessionId: -2147483648 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: state: UNKNOWN 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: context: com.mydomain.MainActivity@6eae527 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: client: com.mydomain.MainActivity@6eae527 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: enabled: true 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: hasService: true 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: hasCallback: true 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: onInvisibleCalled false 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: last autofilled data: null 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: tracked views: null 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: fillable ids: null 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: entered ids: null 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: save trigger id: null 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: save on finish(): false 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: compat mode enabled: false 2020-07-26 00:59:25.878 6011-6011/com.mydomain E/FragmentManager: debug: false verbose: false 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: ResourcesManager: 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: cached apks: total=3 created=0 evicted=0 hit=4 miss=3 max=3 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: total apks: 3 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: resources: 3 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: resource impls: 3 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: Local FragmentActivity 6eae527 State: 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: mCreated=true mResumed=true mStopped=false FragmentManager misc state: 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: mHost=androidx.fragment.app.FragmentActivity$HostCallbacks@68e5dbc 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: mContainer=androidx.fragment.app.FragmentActivity$HostCallbacks@68e5dbc 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: mCurState=4 mStateSaved= 2020-07-26 00:59:25.879 6011-6011/com.mydomain E/FragmentManager: false mStopped=false mDestroyed=false 2020-07-26 00:59:25.880 6011-6011/com.mydomain E/AndroidRuntime: FATAL EXCEPTION: main Process: com.mydomain, PID: 6011 java.lang.IllegalArgumentException: No view found for id 0x7f0800a2 (com.mydomain:id/frameLayout) for fragment FullscreenExoPlayerFragment{973798c #1 id=0x7f0800a2} at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1292) at android.app.FragmentManagerImpl.addAddedFragments(FragmentManager.java:2426) at android.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2205) at android.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2161) at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2062) at android.app.FragmentManagerImpl$1.run(FragmentManager.java:738) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:193) at android.app.ActivityThread.main(ActivityThread.java:6669) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

As i have understood container view is not found to load fragment.

The work around is:

//fragmentTransaction.replace(R.id.frameLayout, vpFragment);

fragmentTransaction.replace(android.R.id.content, vpFragment);

Please help me. Let me know if my fix is correct. Thank you.

Hello
how to add button or make video play with aspect ratio fill

Hi @jepiqueau!

As I mentioned in #26, we're evaluating this library for a client project. One of the requirements is to be able to use Chromecast to play the videos (at least on Android).

Have you thought about adding Chromecast support at all? It looks like ExoPlayer has a Chromecast plugin but we're not sure about iOS support. We would be open to sponsoring this work if you're interested.

Thank you for a great plugin!

What if someone tried to exit the video player?! Is there an ability for it?

Is it possible to add resolution switching to the video player. if yes, are there any examples ?.

Hello
How to change font-style / size / color / background color of subtitle (android)

I am embedding for PWA and noticing that the video doesnt stop when going back in the routes using routerLink how do i destroy the component on switching views?

Ionic 4
Angular 8
Capacitor only

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"

Hello, @jepiqueau thanks for creating the plugins. I tried to use the plugin in Android 9 as my target. I added the required class in MainActivity as instructed. I also created the the raw folder and insert my video.mp4 in the folder.

here is my code in typescript for reference

async ngOnInit() {
    const info = await Device.getInfo()
    if (info.platform == 'android' || info.platform == 'ios') {
      this._videoPlayer = CapacitorVideoPlayer
    } else {
      this._videoPlayer = WebVPPlugin.CapacitorVideoPlayer
    }
  }

async ionViewDidEnter() {
    console.log('enter');

    const res: any = await this._videoPlayer.initPlayer({
      mode: "fullscreen",
      url: '/raw/video',
      playerId: "fullscreen",
      componentTag: "etika"
    });
}

when i try to run it on emulator, i got this error

V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 46878965, pluginId: CapacitorVideoPlayer, methodName: initPlayer
V/Capacitor: callback: 46878965, pluginId: CapacitorVideoPlayer, methodName: initPlayer, methodData: {"mode":"fullscreen","url":"\/raw\/video","playerId":"fullscreen","componentTag":"etika"}
D/CapacitorVideoPlayer: **** isTV false ****
V/CapacitorVideoPlayer: *** in initPlayer true ***
V/CapacitorVideoPlayer: display url: /raw/video
E/Capacitor: Serious error executing plugin
    java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Method.invoke(Native Method)
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99)
        at com.getcapacitor.Bridge$1.run(Bridge.java:526)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.os.HandlerThread.run(HandlerThread.java:65)
     Caused by: java.lang.StringIndexOutOfBoundsException: length=10; index=11
        at java.lang.String.substring(String.java:2032)
        at com.jeep.plugin.capacitor.CapacitorVideoPlayer.initPlayer(CapacitorVideoPlayer.java:116)
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99) 
        at com.getcapacitor.Bridge$1.run(Bridge.java:526) 
        at android.os.Handler.handleCallback(Handler.java:873) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:193) 
        at android.os.HandlerThread.run(HandlerThread.java:65) 
E/AndroidRuntime: FATAL EXCEPTION: CapacitorPlugins
    Process: com.skyrembrilliant.mywarung, PID: 10803
    java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
        at com.getcapacitor.Bridge$1.run(Bridge.java:535)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.os.HandlerThread.run(HandlerThread.java:65)
     Caused by: java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Method.invoke(Native Method)
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99)
        at com.getcapacitor.Bridge$1.run(Bridge.java:526)
        at android.os.Handler.handleCallback(Handler.java:873) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:193) 
        at android.os.HandlerThread.run(HandlerThread.java:65) 
     Caused by: java.lang.StringIndexOutOfBoundsException: length=10; index=11
        at java.lang.String.substring(String.java:2032)
        at com.jeep.plugin.capacitor.CapacitorVideoPlayer.initPlayer(CapacitorVideoPlayer.java:116)
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:99) 
        at com.getcapacitor.Bridge$1.run(Bridge.java:526) 
        at android.os.Handler.handleCallback(Handler.java:873) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:193) 
        at android.os.HandlerThread.run(HandlerThread.java:65) 

is there anything that i misconfig?

Currently, the native player does not support interactive apis as many as web plugin does. Do you have any plans or roadmap that can share with us? Thanks.

hello , how to add subtitle to video ? (ios , Android)

Hey ! add support for url without type, without create manually a raw folder under the res folder.

Hi, thanks for this plugin, its really good. Worked well for our hybrid app which we are trying using ionic/angular and capacitor.

We are trying to prevent the "download" option from the video, looks like there is a way from video element to add below tag

controlsList="nodownload"

Is there an easy to set this as property or configure when we use "this.videoPlayer.initPlayer".

Appreciate any help on this.

Thanks,
Vijay

@jepiqueau Good morning.
In my case, i have to play videos from application storage application/files/OTHER/FOLDERS/video.mp4 which obviously throws:

'initPlayer command failed: Video file not found'

To fix this issue, the line 22 in FileUtils:
path = filesDir + url.substring(url.lastIndexOf('/') + 1);
Should be like this:
path = filesDir + url.substring(url.lastIndexOf("files/") + 6);

Can this be fixed anytime soon?
Thanks in advance.

Hi @jepiqueau!

Thank you for a great plugin. We are evaluating using your library for a client project and require that videos be embedded on the iOS and Android platforms - with the ability to enter fullscreen mode from there.

Do you have any plans to add support for this? We're open to talking about potentially sponsoring this work as well. 😄

Thanks again!

It seems that there is an issue if I try to play a video that has any query params it will not load. What I'm trying to do is upload an mp4 to firebase storage, then to access that there is a token attached to the url. When I try to play the video with the token attached it does not load the player.

For instance I have a url that ends like this

big_buck_bunny_720p_surround.mp4?alt=media&token=a8abafa7-5fd9-4179-be5f-1963a5b60d51

When I take off the params then the player will try to load the video but it is rejected without the token attached.