### Install Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Installs the capacitor-video-player package and synchronizes native projects.

```bash
npm install --save capacitor-video-player
npx cap sync
npx cap sync @capacitor-community/electron
```

--------------------------------

### Build and Copy Commands (Bash)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/Usage_2.4.7.md

Provides the necessary bash commands to build the project, copy Capacitor assets, and start the development server.

```bash
npm run build
npx cap copy
npx cap copy web
npm start
```

--------------------------------

### Initialize and Control Video Player (TypeScript)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/Usage_2.4.7.md

Demonstrates initializing the Capacitor Video Player in fullscreen mode, setting up event listeners for playback events, and controlling playback actions like pause, get duration, set volume, seek, and play. It also shows how to add listeners for various player events.

```typescript
import {  CapacitorVideoPlayer } from 'capacitor-video-player';
 @Component( ... )
 export class MyPage {
    private _videoPlayer: any;
    private _url: string;
    private _handlerPlay: any;
    private _handlerPause: any;
    private _handlerEnded: any;
    private _handlerReady: any;
    private _handlerPlaying: any;
    private _handlerExit: any;

    componentWillLoad() {
      ...
      this._videoPlayer = CapacitorVideoPlayer;
      this._url = "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4";
      this._addListenersToPlayerPlugin();
      ...
    }
    async componentDidLoad() {
      ...
      const res:any  = await videoPlayer.initPlayer({mode:"fullscreen",url:this._url,playerId="fullscreen",componentTag="my-page"});
      console.log('result of init ', res)
      ...
    }
    private _addListenersToPlayerPlugin() {
      this._handlerPlay = this._videoPlayer.addListener('jeepCapVideoPlayerPlay', (data:any) => {
        console.log('Event jeepCapVideoPlayerPlay ', data);
        ...
      }, false);
      this._handlerPause = this._videoPlayer.addListener('jeepCapVideoPlayerPause', (data:any) => {
        console.log('Event jeepCapVideoPlayerPause ', data);
        ...
      }, false);
      this._handlerEnded = this._videoPlayer.addListener('jeepCapVideoPlayerEnded', async (data:any) => {
        console.log('Event jeepCapVideoPlayerEnded ', data);
        ...
      }, false);
      this._handlerExit = this._videoPlayer.addListener('jeepCapVideoPlayerExit', async (data:any) => {
        console.log('Event jeepCapVideoPlayerExit ', data)
        ...
        }, false);
      this._handlerReady = this._videoPlayer.addListener('jeepCapVideoPlayerReady', async (data:any) => {
        console.log('Event jeepCapVideoPlayerReady ', data)
        ...
      }, false);
      this._handlerPlaying = this._videoPlayer.addListener('jeepCapVideoPlayerPlaying', async (data:any) => {
        console.log('Event jeepCapVideoPlayerPlaying ', data)
        ...
      }, false);

    }
    render() {
      return (
        <Host>
          <slot>
            <div id="fullscreen">

            </div>
          </slot>
        </Host>
      );
    }
 }
```

```typescript
this._apiTimer3 = setTimeout(async () => {
    const pause = await this._videoPlayer.pause({playerId:"fullscreen"});
    console.log('const pause ', pause);
    const duration = await this._videoPlayer.getDuration({playerId:"fullscreen"});
    console.log("duration ",duration);
    const volume = await this._videoPlayer.setVolume({playerId:"fullscreen",volume:1.0});
    console.log("Volume ",volume);
    const setCurrentTime = await this._videoPlayer.setCurrentTime({playerId:"fullscreen",seektime:(duration.value - 3)});
    console.log('const setCurrentTime ', setCurrentTime);
    const play = await this._videoPlayer.play({playerId:"fullscreen"});
    console.log('const play ', play);
  }, 10000);
}, 10000);

          }, 5000);
        }
      }, false);

    }
    ... 
 }
```

--------------------------------

### Play Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Starts or resumes video playback. This action is supported on all platforms: Android, iOS, Electron, and Web.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async playVideo() {
  await VideoPlayer.play();
}
```

```java
// Android implementation for play
// ... (Call ExoPlayer play method)
webView.evaluateJavascript("window.CapacitorVideoPlayer.play()", null);
```

```swift
// iOS implementation for play
// ... (Call AVPlayer play method)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.play()")
```

```javascript
// Electron implementation for play
// ... (Call HTML5 video element play method)
window.CapacitorVideoPlayer.play();
```

--------------------------------

### Get Video Playback Rate

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Retrieves the current playback speed of a video player. It requires an options object with the player ID to specify which player's rate to get.

```typescript
getRate(options: capVideoPlayerIdOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Get Playback Rate of Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Retrieves the current playback speed rate. Supported on Android, iOS, Electron, and Web.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async getRate() {
  const rate = await VideoPlayer.getRate();
  console.log('Playback rate:', rate.value);
}
```

```java
// Android implementation for getRate
// ... (Get playback speed from ExoPlayer)
webView.evaluateJavascript("window.CapacitorVideoPlayer.getRate()", (result) -> {
    // Handle result
});
```

```swift
// iOS
```

--------------------------------

### Get Duration of Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Retrieves the total duration of the video. Supported across Android, iOS, Electron, and Web.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async getDuration() {
  const duration = await VideoPlayer.getDuration();
  console.log('Duration:', duration.value);
}
```

```java
// Android implementation for getDuration
// ... (Get duration from ExoPlayer)
webView.evaluateJavascript("window.CapacitorVideoPlayer.getDuration()", (result) -> {
    // Handle result
});
```

```swift
// iOS implementation for getDuration
// ... (Get duration from AVPlayer)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.getDuration()") { result, error in
    // Handle result
}
```

```javascript
// Electron implementation for getDuration
// ... (Get duration from HTML5 video element)
window.CapacitorVideoPlayer.getDuration().then(duration => {
  console.log('Duration:', duration.value);
});
```

--------------------------------

### Get Current Time of Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Retrieves the current playback time of the video. Supported across Android, iOS, Electron, and Web.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async getCurrentTime() {
  const time = await VideoPlayer.getCurrentTime();
  console.log('Current time:', time.value);
}
```

```java
// Android implementation for getCurrentTime
// ... (Get current position from ExoPlayer)
webView.evaluateJavascript("window.CapacitorVideoPlayer.getCurrentTime()", (result) -> {
    // Handle result
});
```

```swift
// iOS implementation for getCurrentTime
// ... (Get current playback time from AVPlayer)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.getCurrentTime()") { result, error in
    // Handle result
}
```

```javascript
// Electron implementation for getCurrentTime
// ... (Get current time from HTML5 video element)
window.CapacitorVideoPlayer.getCurrentTime().then(time => {
  console.log('Current time:', time.value);
});
```

--------------------------------

### Play Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Starts or resumes playback of the video for a given player ID. This function returns a promise that resolves with the player's result upon successful execution.

```typescript
play(options: capVideoPlayerIdOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Get Volume of Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Retrieves the current audio volume level of the video player. Supported on Android, iOS, Electron, and Web.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async getVolume() {
  const volume = await VideoPlayer.getVolume();
  console.log('Volume:', volume.value);
}
```

```java
// Android implementation for getVolume
// ... (Get volume level from ExoPlayer)
webView.evaluateJavascript("window.CapacitorVideoPlayer.getVolume()", (result) -> {
    // Handle result
});
```

```swift
// iOS implementation for getVolume
// ... (Get volume level from AVPlayer)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.getVolume()") { result, error in
    // Handle result
}
```

```javascript
// Electron implementation for getVolume
// ... (Get volume level from HTML5 video element)
window.CapacitorVideoPlayer.getVolume().then(volume => {
  console.log('Volume:', volume.value);
});
```

--------------------------------

### Get Video Player Volume

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Retrieves the current volume level of the video for a specified player ID. The function returns a promise that resolves with the player's result containing the volume information.

```typescript
getVolume(options: capVideoPlayerIdOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Get Video Muted Status

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Retrieves the muted status of a specific video player. It requires an options object with the player ID to identify the target player.

```typescript
getMuted(options: capVideoPlayerIdOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Get Video Player Duration

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Retrieves the total duration of the video associated with a given player ID. It returns a promise that resolves with the player's result containing the duration information.

```typescript
getDuration(options: capVideoPlayerIdOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Get Video Player Current Time

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Fetches the current playback time of the video for a specified player ID. The function returns a promise that resolves with the player's result, including the current time.

```typescript
getCurrentTime(options: capVideoPlayerIdOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Build and Deploy Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Builds the application, copies native assets, and opens native projects or serves the application.

```bash
npm run build
npx cap copy
npx cap copy web
npx cap copy @capacitor-community/electron
npx cap open android
npx cap open ios
npx cap open @capacitor-community/electron
npx cap serve
```

--------------------------------

### Serve Documentation Locally (Windows)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/contributing/documentation.md

Serves the MkDocs documentation locally using the 'mkdocs serve' command on Windows.

```powershell
mkdocs serve
```

--------------------------------

### Serve Documentation Locally (macOS/Linux)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/contributing/documentation.md

Serves the MkDocs documentation locally using the 'mkdocs serve' command on macOS and Linux.

```shell
mkdocs serve
```

--------------------------------

### Initialize Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Initializes a video player instance with the provided options. This is the first step before interacting with any player functionalities. It returns a promise that resolves with the player's result.

```typescript
initPlayer(options: capVideoPlayerOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Activate Capacitor Video Environment (Windows)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/contributing/documentation.md

Activates the 'cap-video' Python environment using Micromamba on Windows systems.

```powershell
micromamba activate cap-video
```

--------------------------------

### Initialize Capacitor Video Player (URL Application/Files)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player using URLs from the application's file system. This is supported on Android and iOS, allowing playback of files managed by the app.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerFromAppFiles(options: any) {
  await VideoPlayer.initPlayer({
    url: 'capacitor://localhost/_capacitor_file_/path/to/app/file.mp4',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (url application/files)
// ... (ExoPlayer setup for app files)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: 'capacitor://localhost/_capacitor_file_/path/to/app/file.mp4', ...options })", null);
```

```swift
// iOS implementation for initPlayer (url application/files)
// ... (AVPlayer setup for app files)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: 'capacitor://localhost/_capacitor_file_/path/to/app/file.mp4', ...options })")
```

--------------------------------

### Activate Capacitor Video Environment (macOS/Linux)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/contributing/documentation.md

Activates the 'cap-video' Python environment using Micromamba on macOS and Linux systems.

```shell
micromamba activate cap-video
```

--------------------------------

### Get Muted State of Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Checks if the video player's audio is currently muted. Supported on Android, iOS, Electron, and Web.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async getMuted() {
  const muted = await VideoPlayer.getMuted();
  console.log('Is muted:', muted.value);
}
```

```java
// Android implementation for getMuted
// ... (Check mute status of ExoPlayer)
webView.evaluateJavascript("window.CapacitorVideoPlayer.getMuted()", (result) -> {
    // Handle result
});
```

```swift
// iOS implementation for getMuted
// ... (Check mute status of AVPlayer)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.getMuted()") { result, error in
    // Handle result
}
```

```javascript
// Electron implementation for getMuted
// ... (Check mute status of HTML5 video element)
window.CapacitorVideoPlayer.getMuted().then(muted => {
  console.log('Is muted:', muted.value);
});
```

--------------------------------

### Initialize Capacitor Video Player (Headers)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with custom HTTP headers. This is supported on Android and iOS, useful for authentication or passing specific metadata with video requests.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithHeaders(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    headers: {
      'Authorization': 'Bearer YOUR_TOKEN'
    },
    ...options
  });
}
```

```java
// Android implementation for initPlayer (headers)
// ... (ExoPlayer setup with custom headers)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', headers: { 'Authorization': 'Bearer YOUR_TOKEN' }, ...options })", null);
```

```swift
// iOS implementation for initPlayer (headers)
// ... (AVPlayer setup with custom headers)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: '...', headers: { 'Authorization': 'Bearer YOUR_TOKEN' }, ...options })")
```

--------------------------------

### Initialize Capacitor Video Player (URL Assets)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player using assets from the application's bundle or local storage. This feature is available on Android, iOS, and Electron. It allows playback of videos stored within the app.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerFromAssets(options: any) {
  await VideoPlayer.initPlayer({
    url: 'assets:///path/to/video.mp4',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (url assets)
// ... (ExoPlayer setup for local assets)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: 'assets:///path/to/video.mp4', ...options })", null);
```

```swift
// iOS implementation for initPlayer (url assets)
// ... (AVPlayer setup for local assets)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: 'assets-library://path/to/video.mp4', ...options })")
```

```javascript
// Electron implementation for initPlayer (url assets)
// ... (HTML5 video element setup for local assets)
window.CapacitorVideoPlayer.initPlayer({ url: 'app://./path/to/video.mp4', ...options });
```

--------------------------------

### Initialize Capacitor Video Player (Small Title)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with a small title. Supported on Android and iOS, this might be used for a more compact title display in certain UI contexts.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithSmallTitle(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    smallTitle: 'Video',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (smallTitle)
// ... (UI setup for small title)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', smallTitle: 'Video', ...options })", null);
```

```swift
// iOS implementation for initPlayer (smallTitle)
// ... (UI setup for small title)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: '...', smallTitle: 'Video', ...options })")
```

--------------------------------

### Update Capacitor Video Player Dependencies

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/Notes_Exoplayer2.18.1.md

Updates the 'build.gradle' file for the capacitor-video-player to integrate Exoplayer v2.18.1 and its related extensions, including core, UI, HLS, DASH, smooth streaming, mediasession, and cast.

```Java
dependencies {
    ... 
    implementation 'com.google.android.exoplayer:exoplayer-core:2.18.1'
    implementation 'com.google.android.exoplayer:exoplayer-ui:2.18.1'
    implementation 'com.google.android.exoplayer:exoplayer-hls:2.18.1'
    implementation 'com.google.android.exoplayer:exoplayer-dash:2.18.1'
    implementation 'com.google.android.exoplayer:exoplayer-smoothstreaming:2.18.1'
    implementation 'com.google.android.exoplayer:extension-mediasession:2.18.1'
    implementation 'com.google.android.exoplayer:exoplayer:2.18.1'
    implementation 'com.google.android.exoplayer:extension-cast:2.18.1'
    ... 
}
```

--------------------------------

### Initialize Capacitor Video Player (Fullscreen Mode)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player in fullscreen mode. This method is supported across Android, iOS, Electron, and Web platforms. It is a core function for setting up video playback.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initFullscreenPlayer(options: any) {
  await VideoPlayer.initPlayer({
    mode: 'fullscreen',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (fullscreen mode)
// ... (ExoPlayer setup for fullscreen)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ mode: 'fullscreen', ...options })", null);
```

```swift
// iOS implementation for initPlayer (fullscreen mode)
// ... (AVPlayer setup for fullscreen)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ mode: 'fullscreen', ...options })")
```

```javascript
// Electron implementation for initPlayer (fullscreen mode)
// ... (HTML5 video element setup for fullscreen)
window.CapacitorVideoPlayer.initPlayer({ mode: 'fullscreen', ...options });
```

--------------------------------

### Initialize Capacitor Video Player (Artwork)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with artwork, likely for display during playback or when the video is paused. Supported on Android and iOS.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithArtwork(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    artwork: 'path/to/artwork.png',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (artwork)
// ... (UI setup for artwork display)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', artwork: 'path/to/artwork.png', ...options })", null);
```

```swift
// iOS implementation for initPlayer (artwork)
// ... (UI setup for artwork display)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: '...', artwork: 'path/to/artwork.png', ...options })")
```

--------------------------------

### Configure Capacitor Video Player Options

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Defines the configuration options for the Capacitor video player. This includes setting the player mode (fullscreen or embedded), providing the video URL, specifying subtitle details and language, and configuring player behavior like looping, picture-in-picture, and background mode.

```typescript
interface capVideoPlayerOptions {
  mode?: "fullscreen" | "embedded";
  url?: string;
  subtitle?: string;
  language?: string;
  subtitleOptions?: SubTitleOptions;
  playerId?: string;
  rate?: number;
  exitOnEnd?: boolean;
  loopOnEnd?: boolean;
  pipEnabled?: boolean;
  bkmodeEnabled?: boolean;
  showControls?: boolean;
  displayMode?: "all" | "portrait" | "landscape";
  componentTag?: string;
  width?: number;
  height?: number;
  headers?: { [key: string]: string };
  title?: string;
}
```

--------------------------------

### Initialize Capacitor Video Player (Subtitles)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with subtitle support. This feature is available on Android and iOS, enabling users to view captions or subtitles alongside the video.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithSubtitles(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    subtitles: 'path/to/subtitles.srt',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (subtitles)
// ... (ExoPlayer setup with subtitle track)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', subtitles: 'path/to/subtitles.srt', ...options })", null);
```

```swift
// iOS implementation for initPlayer (subtitles)
// ... (AVPlayer setup with subtitle track)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: '...', subtitles: 'path/to/subtitles.srt', ...options })")
```

--------------------------------

### Initialize Capacitor Video Player (URL Internal)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with a URL pointing to internal storage. This is supported on Android and iOS. It enables playback of videos stored in the app's private directories.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerFromInternal(options: any) {
  await VideoPlayer.initPlayer({
    url: 'capacitor://localhost/_capacitor_file_/path/to/internal/video.mp4',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (url internal)
// ... (ExoPlayer setup for internal storage)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: 'capacitor://localhost/_capacitor_file_/path/to/internal/video.mp4', ...options })", null);
```

```swift
// iOS implementation for initPlayer (url internal)
// ... (AVPlayer setup for internal storage)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: 'capacitor://localhost/_capacitor_file_/path/to/internal/video.mp4', ...options })")
```

--------------------------------

### Initialize Capacitor Video Player (Title)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with a title. This feature is available on Android and iOS, allowing a title to be displayed, potentially in the player's UI.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithTitle(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    title: 'My Awesome Video',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (title)
// ... (UI setup to display title)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', title: 'My Awesome Video', ...options })", null);
```

```swift
// iOS implementation for initPlayer (title)
// ... (UI setup to display title)
webView.evaluateJavaScript("window.CapacitorVideoPlayer.initPlayer({ url: '...', title: 'My Awesome Video', ...options })")
```

--------------------------------

### Initialize Capacitor Video Player (Chromecast)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with Chromecast support. This functionality is available on Android, enabling casting of video content to Chromecast devices.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithChromecast(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    chromecast: true,
    ...options
  });
}
```

```java
// Android implementation for initPlayer (chromecast)
// ... (Chromecast SDK integration)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', chromecast: true, ...options })", null);
```

--------------------------------

### Echo Method - Capacitor Video Player

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

The `echo` method in the Capacitor Video Player plugin is used to send a message and receive an echoed response. It takes an options object and returns a Promise that resolves with the result.

```typescript
echo(options: capEchoOptions) => Promise<capVideoPlayerResult>
```

--------------------------------

### Initialize Capacitor Video Player in Angular

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/Usage_2.4.7.md

Initializes the Capacitor Video Player plugin within an Angular component. It detects the platform (iOS/Android vs. web) to use the appropriate plugin implementation and sets up the video URL and event listeners.

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

@Component({
  tag: 'my-page',
  styleUrl: 'my-page.css'
})
export class MyPage implements OnInit {
    private _videoPlayer: any;
    private _url: string;
    private _handlerPlay: any;
    private _handlerPause: any;
    private _handlerEnded: any;
    private _handlerReady: any;
    private _handlerExit: any;
    private _first: boolean = false;
    private _apiTimer1: any;
    private _apiTimer2: any;
    private _apiTimer3: any;
    private _testApi: boolean = true;

    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
      }
      // define the video url
      this._url = "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
      // add listeners to the plugin
      this._addListenersToPlayerPlugin();
    }
    async ionViewDidEnter() {
      ...
      const res:any  = await this._videoPlayer.initPlayer({mode:"fullscreen",url:this._url,playerId:"fullscreen",componentTag:"my-page"});
      ...

    }

    private _addListenersToPlayerPlugin() {
      this._handlerPlay = this._videoPlayer.addListener('jeepCapVideoPlayerPlay', (data:any) => {
        console.log('Event jeepCapVideoPlayerPlay ', data);
        ...
      }, false);
      this._handlerPause = this._videoPlayer.addListener('jeepCapVideoPlayerPause', (data:any) => {
        console.log('Event jeepCapVideoPlayerPause ', data);
        ...
      }, false);
      this._handlerEnded = this._videoPlayer.addListener('jeepCapVideoPlayerEnded', async (data:any) => {
        console.log('Event jeepCapVideoPlayerEnded ', data);
        ...
      }, false);
      this._handlerExit = this._videoPlayer.addListener('jeepCapVideoPlayerExit', async (data:any) => {
        console.log('Event jeepCapVideoPlayerExit ', data)
        ...
        }, false);
      this._handlerReady = this._videoPlayer.addListener('jeepCapVideoPlayerReady', async (data:any) => {
        console.log('Event jeepCapVideoPlayerReady ', data)
        console.log("testVideoPlayerPlugin testAPI ",this._testApi);
        console.log("testVideoPlayerPlugin first ",this._first);
        if(this._testApi && this._first) {
          // test the API
          this._first = false;
          console.log("testVideoPlayerPlugin calling isPlaying ");
          const isPlaying = await this._videoPlayer.isPlaying({playerId:"fullscreen"});
          console.log('const isPlaying ', isPlaying)
          this._apiTimer1 = setTimeout(async () => {
            const pause = await this._videoPlayer.pause({playerId:"fullscreen"});
            console.log('const pause ', pause)
            const isPlaying = await this._videoPlayer.isPlaying({playerId:"fullscreen"});
            console.log('const isPlaying after pause ', isPlaying)
            let currentTime = await this._videoPlayer.getCurrentTime({playerId:"fullscreen"});
            console.log('const currentTime ', currentTime);
            let muted = await this._videoPlayer.getMuted({playerId:"fullscreen"});
            console.log('initial muted ', muted);
            const setMuted = await this._videoPlayer.setMuted({playerId:"fullscreen",muted:!muted.value});
            console.log('setMuted ', setMuted);
            muted = await this._videoPlayer.getMuted({playerId:"fullscreen"});
            console.log('const muted ', muted);
            const duration = await this._videoPlayer.getDuration({playerId:"fullscreen"});
            console.log("duration ",duration);
            // valid for movies havin a duration > 25
            const seektime = currentTime.value + 0.5 * duration.value < duration.value -25 ? currentTime.value + 0.5 * duration.value
                            : duration.value -25;
            const setCurrentTime = await this._videoPlayer.setCurrentTime({playerId:"fullscreen",seektime:(seektime)});
            console.log('const setCurrentTime ', setCurrentTime);
            const play = await this._videoPlayer.play({playerId:"fullscreen"});
            console.log("play ",play);
            this._apiTimer2 = setTimeout(async () => {
              const setMuted = await this._videoPlayer.setMuted({playerId:"fullscreen",muted:false});
              console.log('setMuted ', setMuted);
              const setVolume = await this._videoPlayer.setVolume({playerId:"fullscreen",volume:0.5});
              console.log("setVolume ",setVolume);
              const volume = await this._videoPlayer.getVolume({playerId:"fullscreen"});
              console.log("Volume ",volume);

```

--------------------------------

### HTML Structure for Video Player (HTML)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/Usage_2.4.7.md

Defines the HTML structure required for the Capacitor Video Player, specifically a div element with the mandatory id 'fullscreen' to host the video player in a fixed slot.

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

--------------------------------

### Show Video Controller

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Displays the video player's user interface controls. This function makes the playback controls visible to the user.

```typescript
showController() => Promise<capVideoPlayerResult>
```

--------------------------------

### Initialize CastContext in MainActivity

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

This Java code snippet shows how to initialize the `CastContext` in your Android `MainActivity`. This is required to enable Chromecast support within the application.

```java
import android.os.Bundle;

import com.google.android.gms.cast.framework.CastContext;


public class MainActivity extends BridgeActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    CastContext.getSharedInstance(this); // <--- add this
  }
}
```

--------------------------------

### Initialize Capacitor Video Player (Accent Color)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player with a specified accent color. This feature is supported on Android, allowing customization of UI elements like progress bars or buttons.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initPlayerWithAccentColor(options: any) {
  await VideoPlayer.initPlayer({
    url: '...', // video URL
    accentColor: '#FF0000',
    ...options
  });
}
```

```java
// Android implementation for initPlayer (accentColor)
// ... (ExoPlayer UI customization)
webView.evaluateJavascript("window.CapacitorVideoPlayer.initPlayer({ url: '...', accentColor: '#FF0000', ...options })", null);
```

--------------------------------

### Initialize Capacitor Video Player (Embedded Mode)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/readme.md

Initializes the video player in embedded mode. This functionality is supported on Electron and Web platforms. It's used for integrating video players within the application's UI.

```typescript
import { registerPlugin } from '@capacitor/core';

const VideoPlayer = registerPlugin('VideoPlayer');

async initEmbeddedPlayer(options: any) {
  await VideoPlayer.initPlayer({
    mode: 'embedded',
    ...options
  });
}
```

```javascript
// Electron implementation for initPlayer (embedded mode)
// ... (HTML5 video element setup for embedded)
window.CapacitorVideoPlayer.initPlayer({ mode: 'embedded', ...options });
```

```javascript
// Web implementation for initPlayer (embedded mode)
// ... (HTML5 video element setup for embedded)
window.CapacitorVideoPlayer.initPlayer({ mode: 'embedded', ...options });
```

--------------------------------

### Configure Cast Options Provider in AndroidManifest.xml

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

This XML snippet demonstrates how to configure the Cast options provider in your Android application's `AndroidManifest.xml` file. This is a necessary step for enabling Chromecast functionality.

```xml
<application>
    ...
    <meta-data
        android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
        android:value="com.google.android.exoplayer2.ext.cast.DefaultCastOptionsProvider" />
</application>
```

--------------------------------

### Update App Dependencies

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/Notes_Exoplayer2.18.1.md

Updates the 'build.gradle' file for the application to include the latest version of play-services-cast-framework.

```Java
dependencies {
    ... 
    implementation 'com.google.android.gms:play-services-cast-framework:21.2.0'
}
```

--------------------------------

### Set Subtitle Options

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Configure subtitle display properties such as foreground and background colors, and font size. These options are applicable when subtitles are enabled.

```typescript
import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  try {
    const photo = await Camera.getPhoto({
      resultType: CameraResultType.Uri, // file-based data
      source: Source.Camera, // Use the camera
      quality: 100 // highest quality
    });

    var imageUrl = photo.webPath;
    // Can be set to the src of an image now
  } catch(e) {
    console.log("Camera issue: " + e);
  }
};
```

--------------------------------

### Configure Player Appearance (Android)

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Set visual properties for the video player on Android, such as subtitle display and accent color for UI elements like the progress bar. These options allow customization of the player's look and feel.

```typescript
import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  try {
    const photo = await Camera.getPhoto({
      resultType: CameraResultType.Uri, // file-based data
      source: Source.Camera, // Use the camera
      quality: 100 // highest quality
    });

    var imageUrl = photo.webPath;
    // Can be set to the src of an image now
  } catch(e) {
    console.log("Camera issue: " + e);
  }
};
```

--------------------------------

### Set Video Volume

Source: https://github.com/harmonwood/capacitor-video-player/blob/main/docs/API.md

Sets the volume for a specific video player instance. This function takes an options object containing the player ID and the desired volume level.

```typescript
setVolume(options: capVideoVolumeOptions) => Promise<capVideoPlayerResult>
```