### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` ``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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) - Optional - Array with playback speed values in string format. Default value `[ '0.5', '1.0', '1.5', '2.0' ]`. ### HTML Definition ```html

``` ``` -------------------------------- ### 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 ``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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

``` -------------------------------- ### 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: , total: , left: } ``` ```json { current: 0, total: 0, left: 0 } ```