abritopach / capacitor-youtube-player Goto Github PK
View Code? Open in Web Editor NEWCapacitor Youtube Player is a custom Native Capacitor plugin to show Youtube Player on Web, IOS and Android platforms.
License: MIT License
Capacitor Youtube Player is a custom Native Capacitor plugin to show Youtube Player on Web, IOS and Android platforms.
License: MIT License
Using versions
"capacitor-youtube-player": "^1.0.5",
"@ionic/angular-toolkit": "^3.1.1",
"@ionic/cli": "^6.18.1",
"@ionic/angular": "^5.9.3",
"@angular/cli": "^11.2.18"
Safari v15
The video player renders my video in the application. On using the fullscreen option in video player, the video tends to occupy only the full viewport height but not the entire width of the browser.
This seems to work fine in Google Chrome and Firefox.
Ionic:
Ionic CLI : 5.4.5 (/Users/username/.nvm/versions/node/v13.0.1/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.2
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Capacitor:
Capacitor CLI : 1.3.0
@capacitor/core : 1.3.0
Cordova:
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
Android SDK Tools : 26.1.1 (/Users/username/Library/Android/sdk)
ios-deploy : 1.9.4
NodeJS : v13.0.1 (/Users/username/.nvm/versions/node/v13.0.1/bin/node)
npm : 6.12.0
OS : macOS Catalina
Xcode : Xcode 11.0 Build version 11A420a
I have problems using the plugin, when i try to build the app on Android Studio, a get an error with the plugin import in MainActivity.java
This is my MainActivity.java:
package io.ionic.starter;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
import com.jeep.plugin.capacitor.capacitordatastoragesqlite.CapacitorDataStorageSqlite;
import com.abpjap.plugin.youtubeplayer.YoutubePlayer;
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(CapacitorDataStorageSqlite.class);
add(YoutubePlayer.class);
}});
}
}
The output of the build say:
error: package com.abpjap.plugin.youtubeplayer does not exist
error: cannot find symbol class YoutubePlayer
Hi ! Thank you very much for your contribution which helped me a lot!
However, I'm stuck on an issue I hope you will help me solve:
I'd like to use several "video components" on the same page in Ionic Angular, but every time I import several only the first videoPlayer is loading. I've tried to log the return of the promise (then and catch) but with 2 components imported on the same page I only get one return.
I've also checked out your very nice examples for ionic angular with no chance because you do render several videos at once whereas what I am trying to achieve is to be able to import zero-to-many video components without having to centralize information ๐
video.component.ts :
import { AfterViewInit, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { YoutubePlayer } from 'capacitor-youtube-player';
import { IPlayerOptions } from 'capacitor-youtube-player/dist/esm/web/models/models';
import { v4 as uuidv4 } from 'uuid';
@Component({
selector: 'app-video',
templateUrl: './video.component.html',
styleUrls: ['./video.component.scss'],
})
export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() public video_id: string;
@Input() public player_width: number = 640;
@Input() public player_height: number = 360;
@Input() public align: string;
@Input() public autoplay: boolean = false;
@Input() public fullscreen: boolean = true;
id: string = uuidv4().replace(/-/g, '');
ngOnInit() {
if(this.align === undefined) this.align = 'center';
}
ngAfterViewInit() {
this.initializeYoutubePlayer(Capacitor.getPlatform());
}
async ngOnDestroy() {
await this.destroyYoutubePlayer();
}
initializeYoutubePlayer(platform: string) {
// Fullscreen is mandatory for mobile
console.log(platform)
if (platform !== 'web') this.fullscreen = true;
const options: IPlayerOptions = {
playerId: this.id,
playerSize: { width: this.player_width, height: this.player_height },
playerVars: {
autoplay: this.autoplay == true ? 1 : 0,
rel: 0,
},
videoId: this.video_id,
fullscreen: this.fullscreen
};
YoutubePlayer.initialize(options).then(value =>{console.log(value)}).catch(err => { console.log(err) });
}
async destroyYoutubePlayer() {
await YoutubePlayer.destroy(this.id);
}
}
video.component.html :
<ion-content class="video-player" [ngStyle]="{ 'text-align': this.align }">
<ion-item>
<div [id]="this.id"></div>
</ion-item>
</ion-content>
homepage.page.html :
<ion-content>
<app-video [video_id]="'bmwVba65l5M'" [align]="'left'" [fullscreen]="false" [autoplay]="false"></app-video>
<app-video [video_id]="'dQw4w9WgXcQ'" [align]="'right'" [fullscreen]="false" [autoplay]="false"></app-video>
</ion-content>
Thank you in advance for your help!
I couldn't initialize video list in Android. In Android, player only show the last one in full screen.
The example code only include for web, do not mention about video list for Native.
Is this plugin support to load video list in Native or not?
I also got warning about 'Plugins' is deprecated in import line.
import { Plugins, Capacitor } from '@capacitor/core';
Hi,
I tried to include this plugin into my project but it seems like the plugin is not part of the capacitor plugins. I only tried on Android (Emulator)
import { Plugins, Capacitor } from "@capacitor/core
I also tried running the example project but got the same results. Not sure if I'm missing another step.
ionic build
npx cap add android
npx cap open android
Also tried running
npx cap sync
Thank you,
Daniel
Run perfect in Android Emulator, but in a real device not working
Hi I noticed that the package.json has these versions of capacitor
"@capacitor/android": "^4.5.0",
"@capacitor/cli": "^4.5.0",
"@capacitor/core": "^4.5.0",
"@capacitor/ios": "^4.5.0",
Any way these versions can be changed to "latest"? I understand if its a compatibility issue, in that case I will probably just downgrade to 4.5.0 because I confirmed your package works on ios and web haven't checked android but I assume it does as well. I checked that your plugin loaded the player on capacitor 5 btw so I assume it would work on any version.
When we install this plugin, two instances of app icon are present.
This is because of the presence of the intent in the android manifest.
The release builds to fail when we use the plugin.
> Task :capacitor-youtube-player:verifyReleaseResources FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':capacitor-youtube-player:verifyReleaseResources'.
> 1 exception was raised by workers:
com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
node_modules/capacitor-youtube-player/android/capacitor-youtube-player/build/intermediates/aapt_friendly_merged_manifests/release/aapt/AndroidManifest.xml:13: error: resource mipmap/ic_launcher (aka com.abpjap.plugin.youtubeplayer.capacitoryoutubeplayer:mipmap/ic_launcher) not found.
node_modules/capacitor-youtube-player/android/capacitor-youtube-player/build/intermediates/aapt_friendly_merged_manifests/release/aapt/AndroidManifest.xml:13: error: resource mipmap/ic_launcher_round (aka com.abpjap.plugin.youtubeplayer.capacitoryoutubeplayer:mipmap/ic_launcher_round) not found.
error: failed processing manifest.
Install the plugin and try to get a release build.
./gradlew assembleRelease
I am trying to add multiple players in the same window but it seems that each time I call the initialize function the player is changes video instead of creating a new instance.
Can you please share an example of how to add multiple players?
Here is a sample how I am trying to implement this:
ngAfterViewInit() {
this.videos.each((video) => {
let options = {
playerId: video.video_id,
playerSize: {width: '100%', 'min-height': 230},
videoId: video.video_id,
playerVars: {autoplay: 1, modestbranding: 1},
debug: true
};
if (Capacitor.platform === 'web')
this.initializeYoutubePlayerPluginWeb(options);
else // Native
this.initializeYoutubePlayerPluginNative(options);
});
async initializeYoutubePlayerPluginWeb(options) {
const player = await YoutubePlayerWeb.initialize(options);
}
async initializeYoutubePlayerPluginNative(options) {
const { YoutubePlayer } = Plugins;
const playerReady = await YoutubePlayer.initialize(options);
}
}
/node_modules/capacitor-youtube-player/ios/Plugin/YPViewController.swift:50:64: Extra argument 'fullscreen' in call
Ionic:
Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.6
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : 3.5.1
Utility:
cordova-res (update available: 0.15.4) : 0.10.0
native-run : 1.6.0
System:
NodeJS : v18.0.0 (/usr/local/Cellar/node/18.0.0/bin/node)
npm : 8.6.0
OS : macOS Monterey
It seems that the plugin doesn't work with Capacitor 2.x for Android devices. When I try to build the app I get error in YoutubePlayer.java
with the following line
import com.getcapacitor.annotation.CapacitorPlugin;
annotation
comes with the error Cannot resolve symbol 'annotation'
Any help with this?
Update to capacitor 4
Hi,
In the development of my Android application (Capacitor 3 + Ionic 6+ React), I need to get the status of the Youtube player to know when the video is finished.
How can I do this?
I am waiting for your answer
Greetings
subj.
Hello,
I am trying to change the player attributes by using playerVars in the initialize method.
But it seems not to work.
My coding:
const options = {
playerId: 'YT',
playerSize: {
width: 200,
height: 200
},
playerVars: {
controls: 0,
modestbranding: 0,
autoplay: 1,
rel: 0,
showinfo: 1,
},
videoId: 'HcDad4y0dlo',
};
const result: any = await YoutubePlayerWeb.initialize(options);
I have tried various options, but the player looks always the same.
Any ideas? Should this work or is it a bug?
Thanks!
Nils
I built an ionic 6 capacitor 3 app with this plugin, it worked fine until just recently it stoped working on android. Google started blocking the app because they said my app was exposing GCP API keys. How can I fix this?
I've got a Capacitor V3 project Android, I ran:
npm install --save capacitor-youtube-player@latest
then
npx cap sync
Tried this a couple of times and the plugin is still not present in my Android Studio project - as in not even listed on the left project explorer panel.
I can see that it is present in my node_modules
folder though.
I build the project and it runs but when I call init as per your setup instructions:
YoutubePlayer.initialize(options);
I get YoutubePlayer undefined.
Anything I'm missing?
`
Ionic:
Ionic CLI : 5.4.2 (D:\User\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 5.2.1
@angular-devkit/build-angular : 0.901.8
@angular-devkit/schematics : 9.1.8
@angular/cli : 9.1.8
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.2.0
@capacitor/core : 2.2.0
Cordova:
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (D:\Program Files (x86)\Android\android-sdk)
NodeJS : v12.18.0 (D:\Program Files\nodejs\node.exe)
npm : 6.14.5
OS : Windows 10
`
I have this Error
PROJECT_DIR\node_modules\capacitor-youtube-player\android\capacitor-youtube-player\src\main\java\com\abpjap\plugin\youtubeplayer\YoutubePlayerFragment.java:22: error: cannot find symbol
private YouTubePlayer youTubePlayer;
^
symbol: variable "MY_API_KEY"
location: class BuildConfig
The documentation is not proving to be enough to implement Capacitor Youtube API in my app using Ionic 4.
Can we have a demo app or some more detail on how to play video in the app using this API
I am facing a issue while building an APK in a Capacitor 5 project that involves the YouTube Player API integration. The plugin functions correctly on web platforms, but I encounter an error during the APK build process.
YouTubePlayerFragment.initialize(BuildConfig.YOUTUBE_API_KEY, new YouTubePlayer.OnInitializedListener() {
// Listener implementation
});
This issue is related to the absence of the "android.support.v4.app.Fragment class.
Project Details:
Capacitor version: 5.x.x
YouTube Player API plugin version: 1.1.0
Android SDK version: 33
Hello,
Cordova's plugin: Youtube Video Player no longer works under IOS 13.1, I wanted to switch on this one. I wanted to stay on the one of cordova because we can make a play on a button in the form of item-avatar, and we are not obliged to declare on a div the video.
I wish to spend your plugin and see what is possible, but according to the documentation, when I run the application on the simulator, I open the page with the video, I have an error message:
Thread 2: signal SIGABRT
Ionic CLI : 5.2.7
@ionic/angular 4.9.0
NodeJS : v10.15.3
npm : 6.4.1
OS : macOS Mojave
Capacitor : 1.2.0
COCOAPODS: 1.6.1
Thank you
Add option when initializing the plugin to debug and display the logs by console.
I always return undefined error. runs good on web but not on android device. Will there be a fix or is this project dead?
Hi,
Looking at the web.js file in this package it looks like you are consuming the events.
onReady
onStateChange
onReady
onError
I tried adding a listener on the YoutubePlayerWeb object. The callbacks are not being called. Since it seems like you are only listening to events and just console.log the results, can you please allow us to pass the event listeners as options when the player is first initialized?
Thank you,
Daniel
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.