Angular 4: "this.player.markers is not a function ..."

[alandelpiccolo]

Greetings,
trying to test markers within an Angular app.

HTML:

<video #myvideo1 id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
      controls preload="none"
      data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  </video>

TS:

import { VideoService } from './video.service';

@Component({
  selector: 'app-videos',
  templateUrl: './videos.component.html',
  styleUrls: ['./videos.component.sass']
})

export class VideosComponent implements OnInit, OnDestroy, AfterViewInit {

//unrelated code

videoJSplayer: any;
@ViewChild('myvideo1') myvideo1: ElementRef;

ngAfterViewInit() {
      this.videoJSplayer = videojs(document.getElementById('my_video_1'), {}, () => {
           });
      //load the marker plugin
      this.videoJSplayer.markers({
          markers: [
            {time: 9.5, text: "this"},
            {time: 16,  text: "is"},
            {time: 23.6,text: "so"},
            {time: 28,  text: "cool"}
          ]
      });
    }

.angular-cli.json (only the important part):

  "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/rangeslider.js/dist/rangeslider.min.js",
        "../node_modules/video.js/dist/video.min.js",
        "../node_modules/videojs-markers/dist/videojs-markers.js"
      ],

The video is visualized all right, but with no markers:
TypeError: this.videoJSplayer.markers is not a function at VideosComponent.(...)

Thanks!

Alan

[DanielnetoDotCom]

Same here, I am using video js 6, does it makes any difference?

[TheFrankman]

Did anyone get anywhere with this ? I'm having the same issue in Vue

[amrishashok]

Anyone having this issue just add this line at the top of your Angular component
declare var videojs: any;

[CleverMee]

After installing the videojs-markers, is necessary to import the .js to the app.component.ts like this:
import 'videojs-markers';

Regards