Videogular

https://videogular.github.io/videogular2/docs/
Admin
Videogular is an HTML5 video player and media framework built on top of Angular for developing...
Tokens:23,855
Snippets:188
Trust Score:9.7
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Install videogular2 and core-js typings

Source: https://videogular.github.io/videogular2/docs/getting-started

Install the Videogular2 library and the core-js type definitions as development dependencies.

```bash
npm install videogular2 --save
npm install @types/core-js --save-dev

```

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

### Master media example with two videos

Source: https://videogular.github.io/videogular2/docs/getting-started/master-media.html

Shows how to set a master video using [vgMaster]="true" on a video element. All components will respond only to the master video's events and properties. The example includes two videos, with the first one designated as master.

```html
<vg-player>
    <vg-controls>
        <vg-play-pause></vg-play-pause>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>

        <vg-mute></vg-mute>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="master" #master [vgMaster]="true" id="masterVideo" preload="auto">
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>

    <video [vgMedia]="slave" #slave id="slaveVideo" preload="auto">
        <source src="http://static.videogular.com/assets/videos/vr-demo.mp4" type="video/mp4">
    </video>
</vg-player>
```

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

### Targets example with split screen and vgFor

Source: https://videogular.github.io/videogular2/docs/getting-started/master-media.html

Shows how to use vgFor to target user interactions to specific media elements. The example creates a split screen with two videos, each with its own control bar. The vgFor attribute is used on controls to direct interactions to the corresponding video.

```html
<vg-player>
    <div class="left">
        <vg-controls>
            <vg-play-pause vgFor="leftVideo"></vg-play-pause>

            <vg-scrub-bar vgFor="leftVideo">
                <vg-scrub-bar-current-time vgFor="leftVideo"></vg-scrub-bar-current-time>
                <vg-scrub-bar-buffering-time vgFor="leftVideo"></vg-scrub-bar-buffering-time>
            </vg-scrub-bar>

            <vg-time-display vgvgProperty="left" vgvgFormat="mm:ss"></vg-time-display>

            <vg-mute vgFor="leftVideo"></vg-mute>

            <vg-fullscreen vgFor="leftVideo"></vg-fullscreen>
        </vg-controls>

        <video [vgMedia]="left" #left id="leftVideo" preload="auto">
            <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
        </video>
    </div>

    <div class="right">
        <vg-controls>
            <vg-play-pause vgFor="rightVideo"></vg-play-pause>

            <vg-scrub-bar vgFor="rightVideo">
                <vg-scrub-bar-current-time vgFor="rightVideo"></vg-scrub-bar-current-time>
                <vg-scrub-bar-buffering-time vgFor="rightVideo"></vg-scrub-bar-buffering-time>
            </vg-scrub-bar>

            <vg-time-display vgFor="rightVideo" vgvgProperty="left" vgvgFormat="mm:ss"></vg-time-display>

            <vg-mute vgFor="rightVideo"></vg-mute>

            <vg-fullscreen vgFor="rightVideo"></vg-fullscreen>
        </vg-controls>

        <video [vgMedia]="right" #right id="rightVideo" preload="auto">
            <source src="http://static.videogular.com/assets/videos/vr-demo.mp4" type="video/mp4">
        </video>
    </div>
</vg-player>
```

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

### hls.js installation and angular-cli.json configuration

Source: https://videogular.github.io/videogular2/docs/modules/streaming/vg-hls

Shows the required npm install command and the .angular-cli.json scripts entry needed to include hls.min.js. The module depends on hls.js.

```bash
npm install hls.js --save
```

```json
{
    "apps": [
        {
            "scripts": [
                "../node_modules/hls.js/dist/hls.min.js"
            ]
        }
    ]
}
```

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

### VgMute HTML usage example

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-mute

Example of using the VgMute component inside a vg-player with vg-controls. The vgFor input is set to 'my-video' to target the video element with id 'my-video'.

```html
<vg-player>
    <vg-controls>
        <vg-mute vgFor="my-video"></vg-mute>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### Basic video player with vg-player and vgMedia

Source: https://videogular.github.io/videogular2/docs/getting-started/how-videogular-works.html

Minimal Videogular player setup in app.component.html. Requires a vgMedia directive on the video tag for components to work.

```html
<vg-player>
    <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>
</vg-player>

```

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

### VgHLS with headers and bitrate output example

Source: https://videogular.github.io/videogular2/docs/modules/streaming/vg-hls

Shows how to pass an HLS m3u8 URL and custom headers to the vgHls directive, and how to capture the onGetBitrates output event. The headers are Key/Value pairs added to the m3u8 file.

```html
<vg-player>
    <video #myMedia
           [vgHls]="'http://static.videogular.com/assets/videos/videogular.m3u8'"
           [vgHlsHeaders]="headers"
           (onGetBitrates)="hlsBitrates = $event"
           id="my-video"
           type="video/mp4"
           controls>
    </video>
</vg-player>

```

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

### VgPlayer HTML Definition

Source: https://videogular.github.io/videogular2/docs/modules/core/vg-player

Example of using the vg-player component with an onPlayerReady event handler and a video element with vgMedia directive.

```html
<vg-player (onPlayerReady)="onPlayerReady($event)">
    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### VgVolume Component Usage

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-volume

Example of using the VgVolume component in an HTML template to control the volume of a video element.

```APIDOC
## VgVolume Component

### Description
Component to display an horizontal slider bar to change the volume of the current media.

### Inputs
- **vgFor** (string) - Optional - Target media `id` property to change the volume. Only necessary if you have more than one media registered into `VgAPI`.

### HTML Definition
```html
<vg-player>
    <vg-controls>
        <vg-volume vgFor="my-video"></vg-volume>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```
```

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

### VgHLS with VgDASH fallback example

Source: https://videogular.github.io/videogular2/docs/modules/streaming/vg-hls

Shows how to use VgHLS and VgDASH together on a video element. The currentStream can be an mpd, m3u8, or mp4 file, and non-HLS/DASH files fall back to native video. The directive is exported as vgHls for template access.

```html
<vg-player>
    <video #media
           #vgHls="vgHls"
           [vgMedia]="media"
           [vgDash]="currentStream"
           [vgHls]="currentStream"
           id="singleVideo"
           controls
           crossorigin>
    </video>
</vg-player>

```

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

### Component stream property for DRM example

Source: https://videogular.github.io/videogular2/docs/modules/streaming/vg-dash

TypeScript object defining the stream property with source, licenseServers, and token. Used with the DRM HTML example.

```typescript
stream = {
    source: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd',
    licenseServers: {
        'com.widevine.alpha': {
            serverURL: 'https://widevine-proxy.appspot.com/proxy'
        }
    },
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}
```

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

### dashjs dependency configuration in .angular-cli.json

Source: https://videogular.github.io/videogular2/docs/modules/streaming/vg-dash

Configuration to include dashjs library in the Angular CLI build. Requires npm install dashjs --save and adding the script path to the apps[0].scripts array.

```json
{
    ...
    "apps": [
        {
            ...
            "scripts": [
                "../node_modules/dashjs/dist/dash.all.min.js"
            ],
            ...
        }
    ],
    ...
}
```

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

### Component: Get the API in onPlayerReady

Source: https://videogular.github.io/videogular2/docs/getting-started/using-the-api.html

Angular component that imports VgAPI and stores the API instance when the player is ready.

```typescript
import {Component} from '@angular/core';
import {VgAPI} from 'videogular2/core';

@Component({
    selector: 'bound-player',
    templateUrl: 'src/bound-player.html'
})
export class BoundPlayer {
    preload:string = 'auto';
    api:VgAPI;

    constructor() {}

    onPlayerReady(api:VgAPI) {
        this.api = api;
    }
}
```

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

### HTML Definition: VgQualitySelector with vg-dash

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-quality-selector

Example HTML for using vg-quality-selector inside vg-controls. It binds the dashBitrates array to the bitrates input and handles the onBitrateChange event by calling vgDash.setBitrate. The video element uses the vgDash directive and populates dashBitrates via the onGetBitrates event.

```html
<vg-player>
    <vg-controls>
        <vg-quality-selector [bitrates]="dashBitrates"
                             (onBitrateChange)="vgDash.setBitrate($event)">
        </vg-quality-selector>
    </vg-controls>

    <video #myMedia
           #vgDash="vgDash"
           [vgDash]="stream.source"
           (onGetBitrates)="dashBitrates = $event"
           id="my-video"
           type="video/mp4"
           controls>
    </video>
</vg-player>
```

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

### VgScrubBar HTML usage example

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-scrub-bar

Shows how to use the VgScrubBar component within a vg-player and vg-controls. The vgFor input targets the media element with id 'my-video', and [vgSlider] is set to false to disable drag and drop events.

```html
<vg-player>
    <vg-controls>
        <vg-scrub-bar vgFor="my-video" [vgSlider]="false">
            <!-- more components here -->
        </vg-scrub-bar>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### Using VgControlsHidden service in a component

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-controls-hidden

Example component that subscribes to the VgControlsHidden.isHidden observable and calls state(true) or state(false) to hide or show controls. Must be placed inside VgPlayer. The component implements OnDestroy to unsubscribe from the subscription.

```typescript
// Imports and @Component() decorator
// This component must be inside VgPlayer
export class MyCustomComponent implements OnDestroy {
    subscriptions: Subscription[] = [];

    constructor(private controlsHidden: VgControlsHidden) {

    }

    // @Output from vg-player component
    onPlayerReady() {
        this.subscriptions.push(this.controlsHidden.isHidden.subscribe(this.onHideControls.bind(this)));
    }

    hideControls() {
        this.hidden.state(true);
    }

    showControls() {
        this.hidden.state(false);
    }

    onHideControls(state:boolean) {
        console.log('Are controls hidden?', state);
    }

    ngOnDestroy() {
        this.subscriptions.forEach(s => s.unsubscribe());
    }
}

```

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

### init(elem: HTMLElement, medias: QueryList): void

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-fullscreen-api

Initializes the fullscreen polyfill service. Sets the element to full screen mode and provides a fallback to video elements on iOS.

```APIDOC
## init(elem: HTMLElement, medias: QueryList): void

### Description
Initializes the fullscreen polyfill service. Sets the element to full screen mode and provides a fallback to video elements on iOS.

### Method
init

### Parameters
- **elem** (HTMLElement) - Required - Element to set to full screen mode.
- **medias** (QueryList) - Required - QueryList of VgMedia to fallback to video on iOS.

### Returns
void
```

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

### Create Angular application with Angular CLI

Source: https://videogular.github.io/videogular2/docs/getting-started

Run this command to scaffold a new Angular project named 'single-media-player' using SCSS for styling.

```bash
ng new single-media-player --style=scss

```

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

### Player with overlay play, buffering, and custom controls

Source: https://videogular.github.io/videogular2/docs/getting-started/how-videogular-works.html

Adds overlay play, buffering, scrub bars, and a full control bar. Includes multiple video sources and subtitle tracks. The scrub bar inside controls uses pointer-events: none to avoid clicks.

```html
<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

        <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

        <vg-track-selector></vg-track-selector>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
        <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
        <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">

        <track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt" srclang="en" default>
        <track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt" srclang="es">
    </video>
</vg-player>

```

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

### toggleFullscreen(): void

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-fullscreen-api

Changes between full screen and normal mode.

```APIDOC
## toggleFullscreen(): void

### Description
Changes between full screen and normal mode.

### Method
toggleFullscreen

### Parameters
None

### Returns
void
```

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

### Template: Listen for onPlayerReady and set up media player

Source: https://videogular.github.io/videogular2/docs/getting-started/using-the-api.html

HTML template for the Videogular player. It listens for the onPlayerReady event and includes the media element with vgMedia directive.

```html
<vg-player (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

        <vg-track-selector></vg-track-selector>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>
</vg-player>
```

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

### HTML Definition of VgTimeDisplay

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-time-display

Example usage of VgTimeDisplay inside vg-player/vg-controls with three instances showing current, left, and total time. The vgFor property targets the video element with id 'my-video'.

```HTML
<vg-player>
    <vg-controls>
        <vg-time-display vgFor="my-video" [vgProperty]="'current'" [vgFormat]="'mm:ss'"></vg-time-display>
        <vg-time-display vgFor="my-video" [vgProperty]="'left'" [vgFormat]="'mm:ss'"></vg-time-display>
        <vg-time-display vgFor="my-video" [vgProperty]="'total'" [vgFormat]="'mm:ss'"></vg-time-display>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### Import VgStreamingModule in Angular module

Source: https://videogular.github.io/videogular2/docs/modules/streaming

Adds VgStreamingModule to the imports array of an Angular module to enable HLS or DASH streaming. The example shows the import statement and the module configuration within an @NgModule decorator.

```typescript
import { VgStreamingModule } from 'videogular2/streaming';

@NgModule({
    ...
    imports: [
        ...
        VgStreamingModule
    ],
    ...
})
export class AppModule {
}
```

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

### Import VgOverlayPlayModule

Source: https://videogular.github.io/videogular2/docs/modules/overlay-play

Import the VgOverlayPlayModule from 'videogular2/overlay-play' and add it to the NgModule imports array to enable the overlay play button.

```typescript
import { VgOverlayPlayModule } from 'videogular2/overlay-play';

@NgModule({
    ...
    imports: [
        ...
        VgOverlayPlayModule
    ],
    ...
})
export class AppModule {
}
```

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

### VgAPI Service Methods

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-api

Methods available on the VgAPI service for controlling media elements.

```APIDOC
## getDefaultMedia():void

### Description
Returns the first media registered to the API.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
None

### Response
Returns the first media registered to the API.

```

```APIDOC
## getMasterMedia():IPlayable

### Description
Returns the master media registered to the API.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
None

### Response
Returns the master media registered to the API.

```

```APIDOC
## isMasterDefined():boolean

### Description
Returns if there is a master media registered to the API.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
None

### Response
Returns a boolean indicating if a master media is defined.

```

```APIDOC
## getMediaById(id:string = null):any

### Description
Returns a media by `id`. The `id` must match with the attribute `id` on the media object.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
#### Path Parameters
- **id** (string) - Optional - The id of the media to retrieve.

### Response
Returns the media object matching the given id.

```

```APIDOC
## play()

### Description
Play all medias registered.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
None

### Response
No return value.

```

```APIDOC
## pause()

### Description
Pause all medias registered.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
None

### Response
No return value.

```

```APIDOC
## registerElement(elem:HTMLElement)

### Description
Registers a new element as container and saves a reference internally in to the `videogularElement` property.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
#### Path Parameters
- **elem** (HTMLElement) - Required - The element to register as container.

### Response
No return value.

```

```APIDOC
## registerMedia(media:any)

### Description
Register a new media element and saves internally a reference in to the `medias` property.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
#### Path Parameters
- **media** (any) - Required - The media element to register.

### Response
No return value.

```

```APIDOC
## seekTime(value:number, byPercent:boolean)

### Description
Will seek to `value` in seconds or in percentage if `byPercent` is true. By default `byPercent` is false. If there's a master media defined the seek by percentage would be calculated based on master media's duration.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
#### Path Parameters
- **value** (number) - Required - The time to seek to, in seconds or percentage.
- **byPercent** (boolean) - Required - If true, seek by percentage; otherwise seek by seconds.

### Response
No return value.

```

```APIDOC
## addTextTrack(type:'subtitles' | 'caption' | 'descriptions' | 'chapters' | 'metadata', label?:string, language?:string, mode?:'disabled' | 'hidden' | 'showing')

### Description
Create a track dynamically in all registered `medias`. You can add `VTTCue` objects using the `addCue` method available in the `TextTrack` class.

### Method
N/A (Service method)

### Endpoint
N/A (Service method)

### Parameters
#### Path Parameters
- **type** (string) - Required - The type of text track. Allowed values: 'subtitles', 'caption', 'descriptions', 'chapters', 'metadata'.
- **label** (string) - Optional - The label for the track.
- **language** (string) - Optional - The language of the track.
- **mode** (string) - Optional - The mode of the track. Allowed values: 'disabled', 'hidden', 'showing'.

### Response
No return value.

```

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

### VgDASH with DRM license server and token

Source: https://videogular.github.io/videogular2/docs/modules/streaming/vg-dash

HTML template using VgDASH with DRM inputs: vgDRMLicenseServer and vgDRMToken, and handling the onGetBitrates output. The stream property is defined in the component.

```html
<vg-player>
    <video #myMedia
           [vgDash]="stream.source"
           [vgDRMLicenseServer]="stream.licenseServers"
           [vgDRMToken]="stream.token"
           (onGetBitrates)="dashBitrates = $event"
           id="my-video"
           type="video/mp4"
           controls>
    </video>
</vg-player>
```

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

### Update app.module.ts with Videogular modules

Source: https://videogular.github.io/videogular2/docs/getting-started

Replace the contents of src/app/app.module.ts with this code to import and include the Videogular modules. Remove FormsModule and HttpModule as they are not needed for this demo.

```typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import {SingleMediaPlayer} from './single-media-player';

@NgModule({
    declarations: [SingleMediaPlayer],
    imports: [
        BrowserModule,
        VgCoreModule,
        VgControlsModule,
        VgOverlayPlayModule,
        VgBufferingModule
    ],
    providers: [],
    bootstrap: [SingleMediaPlayer]
})
export class AppModule {
}

```

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

### VgUtils Static Class Methods

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-utils

Static methods of the VgUtils service for device and environment detection.

```APIDOC
## VgUtils.getZIndex()

### Description
Returns the highest `z-index` in the website.

### Method
`getZIndex()`

### Returns
- **number** - The highest `z-index` value.

```

```APIDOC
## VgUtils.isMobileDevice()

### Description
Returns if the current device is a mobile or not.

### Method
`isMobileDevice()`

### Returns
- **boolean** - `true` if the device is mobile, `false` otherwise.

```

```APIDOC
## VgUtils.isiOSDevice()

### Description
Returns if the current device is an iOS device.

### Method
`isiOSDevice()`

### Returns
- **boolean** - `true` if the device is an iOS device, `false` otherwise.

```

```APIDOC
## VgUtils.isCordova()

### Description
Returns if the current player is running under Cordova or not.

### Method
`isCordova()`

### Returns
- **boolean** - `true` if running under Cordova, `false` otherwise.

```

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

### onChangeFullscreen: EventEmitter

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-fullscreen-api

Observable to listen changes on the full screen state.

```APIDOC
## onChangeFullscreen: EventEmitter

### Description
Observable to listen changes on the full screen state.

### Type
EventEmitter

### Read-only
Yes
```

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

### HTML Definition of VgVolume with vgFor

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-volume

Use this HTML structure to add a volume slider to a Videogular player. The vgFor input is optional and only needed when more than one media is registered in VgAPI; it targets the media element with the matching id. The example includes a video element with id 'my-video' and the vgMedia directive.

```html
<vg-player>
    <vg-controls>
        <vg-volume vgFor="my-video"></vg-volume>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### VgEvents Static Properties

Source: https://videogular.github.io/videogular2/docs/modules/core/events

Static string constants representing media and advertisement events. Use these constants instead of raw string literals.

```APIDOC
## VgEvents Static Properties

### Description
Static string constants for media and advertisement events. Use these constants instead of raw string literals.

### Properties
- **VG_ABORT** (string) - Static - Event string: 'abort'
- **VG_CAN_PLAY** (string) - Static - Event string: 'canplay'
- **VG_CAN_PLAY_THROUGH** (string) - Static - Event string: 'canplaythrough'
- **VG_DURATION_CHANGE** (string) - Static - Event string: 'durationchange'
- **VG_EMPTIED** (string) - Static - Event string: 'emptied'
- **VG_ENCRYPTED** (string) - Static - Event string: 'encrypted'
- **VG_ENDED** (string) - Static - Event string: 'ended'
- **VG_ERROR** (string) - Static - Event string: 'error'
- **VG_LOADED_DATA** (string) - Static - Event string: 'loadeddata'
- **VG_LOADED_METADATA** (string) - Static - Event string: 'loadedmetadata'
- **VG_LOAD_START** (string) - Static - Event string: 'loadstart'
- **VG_PAUSE** (string) - Static - Event string: 'pause'
- **VG_PLAY** (string) - Static - Event string: 'play'
- **VG_PLAYING** (string) - Static - Event string: 'playing'
- **VG_PROGRESS** (string) - Static - Event string: 'progress'
- **VG_RATE_CHANGE** (string) - Static - Event string: 'ratechange'
- **VG_SEEK** (string) - Static - Event string: 'seek'
- **VG_SEEKED** (string) - Static - Event string: 'seeked'
- **VG_SEEKING** (string) - Static - Event string: 'seeking'
- **VG_STALLED** (string) - Static - Event string: 'stalled'
- **VG_SUSPEND** (string) - Static - Event string: 'suspend'
- **VG_TIME_UPDATE** (string) - Static - Event string: 'timeupdate'
- **VG_VOLUME_CHANGE** (string) - Static - Event string: 'volumechange'
- **VG_WAITING** (string) - Static - Event string: 'waiting'
- **VG_LOAD** (string) - Static - Event string: 'load'
- **VG_ENTER** (string) - Static - Event string: 'enter'
- **VG_EXIT** (string) - Static - Event string: 'exit'
- **VG_START_ADS** (string) - Static - Event string: 'startads'
- **VG_END_ADS** (string) - Static - Event string: 'endads'
```

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

### Import VgImaAdsModule in Angular module

Source: https://videogular.github.io/videogular2/docs/modules/ima-ads

Import VgImaAdsModule from 'videogular2/ima-ads' and add it to the imports array of your Angular module to enable IMA ads.

```typescript
...
import { VgImaAdsModule } from 'videogular2/ima-ads';

@NgModule({
    ...
    imports: [
        ...
        VgImaAdsModule
    ],
    ...
})
export class AppModule {
}
```

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

### VgPlaybackButton Component

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-playback

Button to toggle between different playback speeds. It accepts a target media id and an array of playback speed values.

```APIDOC
## VgPlaybackButton Component

### Description
Button to toggle between different playback speeds.

### Inputs
- **vgFor** (string) - Optional - Target media `id` property to toggle between playback speeds. Only necessary if you have more than one media registered into `VgAPI`.
- **playbackValues** (Array<string>) - Optional - Array with playback speed values in string format. Default value `[ '0.5', '1.0', '1.5', '2.0' ]`.

### HTML Definition
```html
<vg-player>
    <vg-controls>
        <vg-playback-button vgFor="my-video" [playbackValues]="[ '1.0', '2.0', '4.0' ]"></vg-playback-button>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```
```

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

### Add Google IMA scripts to head tag

Source: https://videogular.github.io/videogular2/docs/modules/ima-ads

Add these scripts to the head tag of your index.html to use the IMA ads module. The first script initializes the googletag property, and the second loads the IMA SDK.

```html
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    (function() {
    var gads = document.createElement('script');
    gads.async = true; gads.type = 'text/javascript';
    gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    })();
</script>

<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
```

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

### Show circle on VgScrubBarCurrentTime with vgSlider=true

Source: https://videogular.github.io/videogular2/docs/getting-started/how-videogular-works.html

Enables a circle on VgScrubBarCurrentTime by setting [vgSlider] to true on both the scrub bar and the current time component. The default is false.

```html
    <vg-scrub-bar [vgSlider]="true">
        <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

```

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

### Import VgBufferingModule in Angular module

Source: https://videogular.github.io/videogular2/docs/modules/buffering

Shows how to import VgBufferingModule from 'videogular2/buffering' and add it to the imports array of an Angular module. The ellipsis (...) indicates omitted code.

```typescript
...
import { VgBufferingModule } from 'videogular2/buffering';

@NgModule({
    ...
    imports: [
        ...
        VgBufferingModule
    ],
    ...
})
export class AppModule {
}

```

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

### VgPlaybackButton HTML usage with vgFor and playbackValues

Source: https://videogular.github.io/videogular2/docs/modules/controls/vg-playback

HTML definition for using the VgPlaybackButton component. The vgFor input is optional and only needed when multiple media are registered in VgAPI. The playbackValues input accepts an array of playback speed strings, overriding the default ['0.5', '1.0', '1.5', '2.0'].

```html
<vg-player>
    <vg-controls>
        <vg-playback-button vgFor="my-video" [playbackValues]="[ '1.0', '2.0', '4.0' ]"></vg-playback-button>
    </vg-controls>

    <video #myMedia
           [vgMedia]="myMedia"
           id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### Videogular 2 player HTML definition with vgMedia and vgMaster

Source: https://videogular.github.io/videogular2/docs/modules/core/vg-media

Use this HTML to create a Videogular 2 player with a video element. The video element is bound to the player via the vgMedia directive and set as the master video with vgMaster. The video source is a sample MP4 file.

```html
<vg-player>
    <video #myMedia
           [vgMedia]="myMedia"
           [vgMaster]="true" id="my-video"
           src="http://static.videogular.com/assets/videos/videogular.mp4"
           type="video/mp4">
    </video>
</vg-player>
```

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

### Import VgCoreModule in Angular module

Source: https://videogular.github.io/videogular2/docs/modules/core

Shows how to import VgCoreModule from 'videogular2/core' and add it to the imports array of an Angular module. This is required to use the core components and directives.

```typescript
import { VgCoreModule } from 'videogular2/core';

@NgModule({
    ...
    imports: [
        ...
        VgCoreModule
    ],
    ...
})
export class AppModule {
}
```

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

### Import VgControlsModule in Angular module

Source: https://videogular.github.io/videogular2/docs/modules/controls

Import the VgControlsModule from 'videogular2/controls' and add it to the imports array of your Angular module to enable the video controls module.

```typescript
import { VgControlsModule } from 'videogular2/controls';

@NgModule({
    ...
    imports: [
        ...
        VgControlsModule
    ],
    ...
})
export class AppModule {
}

```

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

### Listen to ended event and reset currentTime

Source: https://videogular.github.io/videogular2/docs/getting-started/using-the-api.html

Subscribe to the ended event of the default media and set currentTime to 0 to replay from the beginning.

```typescript
onPlayerReady(api:VgAPI) {
    this.api = api;

    this.api.getDefaultMedia().subscriptions.ended.subscribe(
        () => {
            // Set the video to the beginning
            this.api.getDefaultMedia().currentTime = 0;
        }
    );
}
```

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

### time property object definition and default

Source: https://videogular.github.io/videogular2/docs/modules/core/services/vg-api

The `time` property returns an object with current, total, and left time values. The first block shows the object definition with float placeholders; the second shows the default values.

```json
{
    current: <float>,
    total: <float>,
    left: <float>
}
```

```json
{
    current: 0,
    total: 0,
    left: 0
}
```
Tokens:
Raw