Angular

Angular

---

WORK IN PROGRESS (see #274)

---

This document describes how to setup Angular with videojs-record.

Setup

Install Angular CLI globally:

npm install -g @angular/cli

Now create a Angular project in a new directory (/tmp/angular-record-app in this case):

cd /tmp
ng new angular-record-app

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This can take some time.

Now install videojs-record and @types/video.js using npm:

cd angular-record-app
npm install --save videojs-record @types/video.js

Sample project

Replace src/app/app.module.ts with the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { VideoJSComponent } from './videojs.component';

@NgModule({
  declarations: [
    AppComponent,
    VideoJSComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create src/app/videojs.component.ts:

import {
  Component,
  OnInit,
  OnDestroy,
  ElementRef,
  Input
} from '@angular/core';

//declare function video.js(id: any, options: any, ready:any): any;

import videojs from 'video.js'

@Component({
  selector: 'videojs',
  templateUrl: './videojs.component.html',
  styleUrls: ['./videojs.component.css']
})

export class VideoJSComponent implements OnInit, OnDestroy {

  // reference to the element itself, we use this to access events and methods
  private _elementRef: ElementRef

  // index to create unique ID for component
  @Input() idx: string;
  
  // video asset url
  @Input() url: any;

  // declare player var
  private player: any; 

  // constructor initializes our declared vars
  constructor(elementRef: ElementRef) {
    this.url = false;
    this.player = false;
  }

  ngOnInit() { }

  // use ngAfterViewInit to make sure we initialize the videojs element
  // after the component template itself has been rendered
  ngAfterViewInit() {
    
    // ID with which to access the template's video element
    let el = 'video_' + this.idx;
    
    // setup the player via the unique element ID
    this.player = videojs(document.getElementById(el), {}, function() {
      
      // Store the video object
      var myPlayer = this, id = myPlayer.id();
      
      // Make up an aspect ratio
      var aspectRatio = 264/640;
      
      // internal method to handle a window resize event to adjust the video player
      function resizeVideoJS(){
        var width = document.getElementById(id).parentElement.offsetWidth;
        myPlayer.width(width);
        myPlayer.height( width * aspectRatio );
      }
      
      // Initialize resizeVideoJS()
      resizeVideoJS();
      
      // Then on resize call resizeVideoJS()
      window.onresize = resizeVideoJS;
    });
  }

}

Create src/app/videojs.component.html:

<video *ngIf="url" id="video_{{idx}}"
  class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
  controls preload="auto"  width="640" height="264">

  <source [src]="url" type="video/mp4" />
</video>

Create src/app/videojs.component.css:

/* change player background color */
#myVideo {
  background-color: #1a535c;
}

Replace src/app/app.component.html with the following:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <videojs *ngFor="let video of videos; let idx = index" [idx]="idx" [url]="video"></videojs>
</div>

Run example

Start the Angular development server:

ng serve

And open http://localhost:4200/ in a browser.