如何使用angular4在播放列表中连续播放视频

Question

下面是我的code.i无法在播放列表中连续播放视频。我不知道我在哪里犯了错误。我得到的错误是这样的 vendor.bundle.js：1295 ERROR错误：未捕获（在承诺中）：TypeError： webpack_require .i（...）不是函数 TypeError： webpack_require .i（...）不是函数     at PlaylistVideojsComponent.webpackJsonp.1173.PlaylistVideojsComponent.playlist（http://localhost:4200/0.chunk.js:26815:94）     在PlaylistVideojsComponent.webpackJsonp.1173.PlaylistVideojsComponent.ngOnInit（http://localhost:4200/0.chunk.js:26809:14).below我提到html和打字稿代码

 <div id="content">
    <div class="row">
        <sa-big-breadcrumbs [items]="['Broadcasters','Video-Js']" icon="home" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    </div>
    <sa-widgets-grid>
        <div class="row">
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <sa-widget>
                    <header>
                        <span class="widget-icon"></span>
                            <h2>VideoJs</h2>
                    </header>
                    <div>
                        <form class="smart-form" [formGroup]="videojsForm">
                            <div class="row">
                                <!-- <div *ngFor="let video of videos"> -->
                               <video id="video" class="video-js vjs-default-skin" controls autoplay="true" width="640px" height="360px" 
                               src="{{video.src}}" type="video.type">
                            </video>
                                <!-- </div> -->
                               <!-- <div *ngFor="let t of test">
<p>t</p>
                               </div>*ngFor="let video of videos" -->
                                <!-- <div *ngFor="let video of videoList"> 

                               <video id="video" class="video-js vjs-default-skin" controls width="640px" height="360px" 
                               src="{{video.src}}" type="video/mp4">
                            </video>
                             </div>  -->
                                <button class="previous" [disabled]="isFirstEl" (click)="previous(video)">Previous</button>
                                <button class="next" [disabled]="isLastEl" (click)="next(video)">Next</button>
                            </div>
                        </form>
                    </div>
                </sa-widget>
            </article>
        </div>
    </sa-widgets-grid>
</div>


component.ts:
import { Component,OnInit } from '@angular/core';
import { videojs } from 'video.js';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import 'videojs-playlist';

@Component({
    selector: 'app-playlist-videojs',
    templateUrl: './playlist-videojs.component.html',
    providers: []
})
export class PlaylistVideojsComponent implements OnInit
{
    videojsForm: FormGroup;
     public videos:any[]=[]; 
     public isFirstEl:boolean=false;
     public isLastEl:boolean=false;
     public video:any={ 'src': 'https://vjs.zencdn.net/v/oceans.mp4',
    'type': 'video/mp4'

     }
     public test:string[]=['v1','v2','v3','v4']
    constructor(private fb: FormBuilder, )
    {

    }

    ngOnInit() {
        this.initForm();
        console.log(JSON.stringify(this.video)+"*******video.src::"+this.video.src);
        this.playlist();

    }
    initForm(){
        this.videojsForm = this.fb.group({
        });
    }


    playlist(){
    var player =videojs('video', { preload: true, techOrder: ["youtube", "html5"], controls: true , "continuous": true, "setTrack": 4});
    let playlist = [
    {
      'src': 'http://media.w3.org/2010/05/sintel/trailer.mp4',
      'type': 'video/mp4'

  }, 

    {
      'src': 'http://media.w3.org/2010/05/bunny/trailer.mp4',
      'type': 'video/mp4'

  }, 
    {
      'src': 'https://vjs.zencdn.net/v/oceans.mp4',
      'type': 'video/mp4'

  },
    {
      'src': 'http://media.w3.org/2010/05/bunny/movie.mp4',
      'type': 'video/mp4'

  }, {

      'src': 'http://media.w3.org/2010/05/video/movie_300.mp4',
      'type': 'video/mp4'
    }
  ];

  this.videos=playlist;
   player.playlist({ videos:playlist, playlist: { hideSidebar: false, upNext: true, hideIcons: false, items: 5 } });
  console.log("*************length"+this.videos.length);
  player.playlist.autoadvance(0);





}
  previous(video:any){
    console.log("inside previous method"+JSON.stringify(video));
    let length=this.videos.length;
    this.isLastEl=false;

    var indexOfStevie =this.videos.findIndex(i => i.src === video.src);
    console.log("indexOfStevie*********"+indexOfStevie)
    if(indexOfStevie!=0){
      console.log("not equals to 0");

      this.video=this.videos[indexOfStevie-1];
    }else{
      console.log(" equals to 0")
      this.isFirstEl=true;
      //this.video=this.videos[length-1];

    }  

  }

  next(video:any){
    console.log("inside next method"+JSON.stringify(video));
    let length=this.videos.length;
    this.isFirstEl=false;

    var indexOfStevie =this.videos.findIndex(i => i.src === video.src);
    console.log("indexOfStevie*********"+indexOfStevie)
    if(indexOfStevie!=(length-1)){
      console.log("not equals to "+(length-1));

      this.video=this.videos[indexOfStevie+1];
    }else{
      console.log(" equals to "+(length-1))
      this.isLastEl=true;
      //this.video=this.videos[length-1];

    }  
  }
}