VideoJS is not playing in angular 5

Question

I am new to angular 5 .I am triying to add videojs inn angular 5 .my code is as follow:- html code

<video *ngIf="url" id="video"class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"controls preload="auto">
    <source [src]="url" type="application/x-mpegURL" />
</video>

ts code

import { videojs } from 'video.js';

private _elementRef: ElementRef;
@Input() idx: string;
@Input() url: any;
private player: any;
ngAfterViewInit() {
 let el = 'video_' + this.idx;
 this.player = videojs(document.getElementById(el), {}, function() {
  let myPlayer = this, id = myPlayer.id();
  let aspectRatio = 264/640;
  function resizeVideoJS(){
    let width = document.getElementById(id).parentElement.offsetWidth;
    myPlayer.width(width);
    myPlayer.height( width * aspectRatio );
  }
  resizeVideoJS();
  window.onresize = resizeVideoJS;
 });
}

I got an error as

ERROR TypeError: video_js_1.videojs is not a function

please help

Answer 1

For Angular 5,6,7,8

Do these things.

1. npm install jquery --save
2. npm install video.js --save
3. npm install videojs-youtube --save //for youtube support if you want
4. npm install videojs-resolution-switcher //for youtube resolution support if you want

5. Edit angular.json file

   "styles": [

   "./node_modules/video.js/dist/video-js.min.css",

   "./node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css",

   "src/styles.css"

   ],

   "scripts": [ "./node_modules/jquery/dist/jquery.js",

   "./node_modules/video.js/dist/video.min.js",

   "./node_modules/videojs-youtube/dist/Youtube.min.js",

   "./node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"

   ]

6. Component.html template

   To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

7. Component.ts TypeScript file

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

declare var videojs: any;

@Component({
  selector: 'app-our-videos',
  templateUrl: './our-videos.component.html',
  styleUrls: ['./our-videos.component.css']
})
export class OurVideosComponent implements OnInit, OnDestroy, AfterViewInit {

  private videoUrl = 'http://www.youtube.com/watch?v=kfd288W8oMs';
  private originData: string = window.location.origin;
  private videoJSplayer: any;
  public posterUrl = '';
  public width = '900';
  public height = '506';

  private  dataSetup: any = {
    'aspectRatio': '640:267',
    'preload': 'none',
    'controls': true,
    'muted': false,
    'autoplay': false,
    'playbackRates': [0.5, 0.75, 1, 1.25, 1.5, 2],
    'techOrder': ['html5', 'youtube'],
    'sources': [{
      'type': 'video/youtube',
      'src': this.videoUrl,
      'youtube': {
        'ytControls': 2,
        'iv_load_policy': 3,
        'color': 'red',
        'modestbranding': 1,
        'rel': 0,
        'fs': 1,
        'customVars': {
          'wmode': 'transparent',
          'enablejsapi': 1,
          'origin': this.originData
        }
      }
    }],
    'plugins': {
      'videoJsResolutionSwitcher': {
       'default': 'low',
       'dynamicLabel': true
      }
    }
  };

  public dataSetupString: string = JSON.stringify(this.dataSetup);

  private changeVideo( newId: string ): void {
    const newYoutubeUrl: string = 'http://www.youtube.com/watch?v=' + newId;
    this.videoJSplayer.src({type: 'video/youtube', src: newYoutubeUrl});
  }

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit(): void {
    this.initVideoJs();
  }

  initVideoJs() {
    this.videoJSplayer = videojs('myVideoPlayer2');
  }

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

Answer 2

Replace:

import { videojs } from 'video.js';

with

import * as videojs from 'video.js';