CODEWITHSUNDEEP
angularvideo.js
surazzarus
surazzarus

Reputation: 792

Setup video.js on angular2

I am using video.js to work on my angular2 vidoes but couldn't make it work. I am using video.js CDN in my index file.

<link href="https://vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.11/video.min.js"></script>

I have a template file

<video *ngIf="videoUrl" id="{{id}}"
  class="video-js vjs-big-play-centered"
  controls
  preload="auto"
>
  <source src="{{listing.url}}" type="video/mp4">
</video>

And component with video.js code inside ngAfterViewInit 

export class ListingComponent implements AfterViewInit, OnInit, OnDestroy {

id: string;

  ngAfterViewInit() {
    videojs(document.getElementById(this.id), {}, function() {
      // Player (this) is initialized and ready.

    });
  }

}

The problem is, it shows error : "Cannot find name 'videojs'." that is inside ngAfterViewInit

I also tried installing video.js via npm and import {videojs} from 'video.js but that didn't work either.

Someone please help me out how to make video.js work with angular2. Thanks in advance

Upvotes: 3

Views: 7044

Answers (4)

abhinavsinghvirsen
abhinavsinghvirsen

Reputation: 2054

After installing vide0.js in your Angular App

1.STEP->

paste <link href=“//vjs.zencdn.net/5.11/video-js.min.css” rel=“stylesheet”>. in index.html

2.Step

Add this in your component.html

<video id=“video” class=“video-js” controls  >
                 </video>

3.STEP

Add this in your component.css

@import ‘~video.js/dist/video-js.css’;
.video-js {
    width: 100%;
    height: 250px;;
  }

4.Step-> in your Component.ts

import videojs from “video.js”; 


url:String=” “; //initialize this with video url
  player: videojs.Player;

add this below code in your method or webhook method

this.url = "assign video url";
           
            this.player = videojs(“video”, {
              controls: true,
              autoplay: false,
              muted: false,
              html5: {
                hls: {
                  overrideNative: true
                }
              }
            });
            this.player.src({
              src: this.url,
              type: “application/x-mpegURL”
            });
            this.player.on(“play”, () => {
              this.player.controls(true);//for controls make it true for other make it false
            });
            this.handleVideoAutoplay();

//you can use this method or ignore as well depend upon you
private handleVideoAutoplay() {
    const playButton = this.player.getChild(“bigPlayButton”);
    if (playButton) {
    //  playButton.hide();
      this.player.ready(() => {
        let promise = this.player.play();
        if (promise === undefined) {
          playButton.show();
          this.player.on(“play”, () => {
           // this.player.muted(false);
          });
        } else {
          promise.then(
            () => {
              playButton.show();
            },
            () => {
              playButton.show();
            }
          );
        }
      });
    }
  }

Upvotes: 0

bnussey
bnussey

Reputation: 1964

When using with Angular 4+ and Angular CLI, I found the best solution was to install via npm package then add videojs to scripts in the angular-cli.json, like so:

"scripts": [
    "../node_modules/video.js/dist/video.min.js"
]

From there, add this to your typings.d.ts:

declare const videojs: any;

Then init as per normal:

ngAfterViewInit() {
  this._videoPlayer = videojs(document.getElementById('video'), {}, () => {});
}

Upvotes: 3

Sathish Kotha
Sathish Kotha

Reputation: 1111

First your are not initializing the videojs. So its showing the videojs undefined.

just find this below code:

declare var videojs: any;

export class ListingComponent implements AfterViewInit, OnInit, OnDestroy {

  id: string;
  private videoJSplayer: any;

  constructor() {}

  ngAfterViewInit() {
    this.videoJSplayer = videojs(document.getElementById('video_player_id'), {}, function() {
      this.play();
    });
  }

  ngOnDestroy() {
    this.videoJSplayer.dispose();
  }
}

html:

 <video 
   *ngIf="videoUrl" 
   id="video_player_id"
   class="video-js vjs-big-play-centered"
   controls 
   preload="auto">
   <source src="{{listing.url}}" type="video/mp4">
 </video>

check this link: videojs plunker plunker with answered

Upvotes: 5

Fawad Mukhtar
Fawad Mukhtar

Reputation: 890

Since Angular 2+ uses ViewEncapsulation by adding a _ng-content-c* attribute to each element under a component and adding the same attribute to the styles, you need to disable this feature to integrate third party libraries such as VideoJS.

Your component definition should be something like this:

@Component({
  selector: 'app-player',
  templateUrl: 'component.html',
  styleUrls: [
    'component.scss',
    '../../../node_modules/video.js/src/css/video-js.scss',
  ],
  encapsulation: ViewEncapsulation.None, // This plus the sytleUrl are the important parts
})
export class PlayerComponent implements OnInit, AfterViewInit {
}

Upvotes: 3

Related Questions