Merge pull request #93 from abritopach/develop

Develop

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

examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.page.ts

@@ -1,8 +1,7 @@
 import { AfterViewInit, Component, OnInit } from '@angular/core';
 
-import { YoutubePlayer } from 'capacitor-youtube-player';
-
 import { Capacitor } from '@capacitor/core';
+import { YoutubePlayer } from 'capacitor-youtube-player';
 import { IPlayerOptions } from 'capacitor-youtube-player/dist/esm/web/models/models';
 
 @Component({
@@ -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,

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",

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) => {