From 0478a6968b222d56c330767db8e58dd9e6df6efb Mon Sep 17 00:00:00 2001 From: abritopach Date: Thu, 2 Dec 2021 20:08:08 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20Updated=20autoplay=20functional?= =?UTF-8?q?ity=20in=20web?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 40 +++++++++++++++++++ .../src/app/pages/home/home.page.ts | 6 +-- package.json | 2 +- src/web.ts | 6 ++- 4 files changed, 49 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8f2605b..c4e1812 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,46 @@ When initializing a youtube player you can enable debug mode to display the logs ## WEB +**IMPORTANT NOTE** + +----- + +### Autoplay + +Currently most browsers **do not support autoplay unless the video is loaded without sound.** + +This is the behaviour of the web plugin if you pass a value of 1 in the autoplay parameter of playerVars. +The video will start playing but without sound. + +``` bash + ... + playerVars: { + autoplay: 1, + rel: 0, + color: 'white', + showinfo: 1, + }, + ... +``` + + +You can read more about the autoplay policy in different browsers by clicking on the following links: + +[Google Chrome](https://developer.chrome.com/blog/autoplay/) + +[Firefox](https://blog.mozilla.org/en/products/firefox/block-autoplay/) + +### Fullscreen + +To display a video in full screen, **user interaction is required**... either by clicking on the play button, another button,... + +You can read more about the fullscreen policy in different browsers by clicking on the following links: + +[Google Chrome](https://developers.google.com/web/fundamentals/native-hardware/fullscreen) + +----- + + Functionality | Methods | Description | Expects | Returns ----------------|----------------|-------------|--------|-------- Load player API & Create Player & Destroy Player | `initialize(options: {playerId: string, playerSize: IPlayerSize, playerVars?: IPlayerVars, videoId: string, debug?: boolean})` | Promise - Load player API & create player. | JSON Object | data diff --git a/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts b/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts index 9633370..eed9a43 100644 --- a/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts +++ b/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts @@ -1,9 +1,8 @@ import { AfterViewInit, Component, OnInit } from '@angular/core'; -import { YoutubePlayer } from 'capacitor-youtube-player'; - import { Capacitor } from '@capacitor/core'; import { IPlayerOptions } from 'capacitor-youtube-player/dist/esm/web/models/models'; +import { YoutubePlayer } from '../../../../../../dist/esm'; @Component({ selector: 'app-home', @@ -38,7 +37,8 @@ export class HomePage implements OnInit, AfterViewInit { playerVars: { autoplay: 1, rel: 0, - showinfo: 1 + color: 'white', + showinfo: 1, }, videoId: 'tDW2C6rcH6M', fullscreen: false, diff --git a/package.json b/package.json index 8b08e13..006574a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "capacitor-youtube-player", - "version": "1.0.7", + "version": "1.0.8", "description": "Capacitor Youtube Player", "main": "dist/plugin.cjs.js", "module": "dist/esm/index.js", diff --git a/src/web.ts b/src/web.ts index 5dda9d7..fd493b4 100644 --- a/src/web.ts +++ b/src/web.ts @@ -85,10 +85,14 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl videoId: options.videoId, events: { // The API will call this function when the video player is ready. - 'onReady': () => { + 'onReady': (event: any) => { this.playerLogger.log(`player "${options.playerId}" -> onPlayerReady`); const state: IPlayerState = {events: {onReady: {text: 'onReady', value: true}}}; this.playersEventsState.set(options.playerId, state); + if (options?.playerVars?.autoplay === 1) { + event.target.mute(); + event.target.playVideo(); + } return resolve({ playerReady: true, player: this.players[options.playerId]}); }, 'onStateChange': (event: any) => { From 90d47a636a6771146898841001bb04729cc959e7 Mon Sep 17 00:00:00 2001 From: abritopach Date: Thu, 2 Dec 2021 20:10:48 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9A=A1=20Updated=20capacitor=20youtube?= =?UTF-8?q?=20player=20import=20in=20ionic=20example=20app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/pages/home/home.page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts b/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts index eed9a43..781601d 100644 --- a/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts +++ b/examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts @@ -1,8 +1,8 @@ import { AfterViewInit, Component, 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 { YoutubePlayer } from '../../../../../../dist/esm'; @Component({ selector: 'app-home',