CODEWITHSUNDEEP
angularangular-clivideo.js
Sathish Kotha
Sathish Kotha

Reputation: 1111

ERROR ReferenceError: 'videojs is not defined ' in angular cli?

I am converting my angular 2 project from systemjs to angular cli. I removed all js and css files from index.html and included the all files and videojs css and js files in the angular-cli.json, project compiled correctly but in the execution i got the error "videojs is not defined", I am not seeing the error if i include the videojs files in the index.html can you help me out . how to resolve this error in angular cli?

angular-cli.json file

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "angular-cli-project"
    },
    "apps": [{
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets",
            "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
            "styles.css",
            "./assets/admin/pages/css/lock.css",
            "./assets/css/dashboardPage.css",
            "./assets/css/facebook.css",
            "./assets/css/form.errors.css",
            "./assets/js/videoCapturing/videojs.record.min.css",
            "./assets/js/videojs/video-js.css",

        ],
        "scripts": [
            "./assets/js/videojs/video.min.js",
            "./assets/js/videoCapturing/RecordRTC.js",
            "./assets/js/videojsvideojs.record.js",
            "./assets/js/videojs/videojs-contrib-hls.js",
            "./assets/js/videojs/videojs.hotkeys.min.js",

        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
        }
    }],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [{
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "component": {}
    }
}

Component code :

import {Component,OnInit, OnDestroy } from '@angular/core';
declare var videojs :any;

@Component({
  selector: 'app-play-video',
  templateUrl: './play-video.component.html',
  styleUrls : [] 
 })
export class PlayVideoComponent implements OnInit{
public videoJSplayer :any;

  ngOnInit() {
    this.videoJSplayer = videojs(document.getElementById('example_video_11'), {}, function() {   // here videojs is undefined.
            this.play();
          }
    }
  }

play-video.component.html :

<video id="example_video_11" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
</video>

project structure image

Upvotes: 1

Views: 3387

Answers (1)

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

A few things here

  1. your code under ngOnInit is missing a closing )

  2. you should use AfterViewInit and not OnInit if your accessing the dom directly. (document.getElementById)

  3. You need to install @types/videojs definitions. Alternatively, you can use window["videojs"]() since videojs will be on the window var.

  4. I have just did exactly what you did, added the video.min.js to src/assets/js/video.min.js then in .angular-cli.json added "./assets/js/videojs/video.min.js" to scripts. It works just fine after doing the above.

Upvotes: 3

Related Questions