Video.js 播放 YouTube 视频时出现错误“youtube”未定义

 @Component({
 selector: 'invidz-video-js-component',
 template: `
<div id="full-background">
  <video
    id="vid"
    class="video-js vjs-default-skin vjs-fullscreen vjs-big-play-centered"
    controls
    data-setup='{ "techOrder": ["youtube"]}'
  >
    <source  type="video/youtube" [src]="videoUrl"/>
  </video>
</div>
`,
   `]
    })
    export class VideoJsComponent implements OnInit, AfterViewInit {

   @Input() videoUrl: string;
  @Input() autoPlay: string;


private player: any;


 constructor() {

}

ngOnInit() {
console.log(this.autoPlay);
console.log(this.videoUrl);
}

ngAfterViewInit() {
  this.player = videojs(document.getElementById('vid'));
 this.player.on('ended', function() {

  });
 }
}

Video.js 播放 YouTube 视频时出现错误“youtube”未定义

Error :

video.es.js:439 VIDEOJS：错误：“youtube”技术未定义。 跳过了对该技术的浏览器支持检查。

这对我有用 包.json

    "video.js": "^7.17.0",
    "videojs-youtube": "^2.6.1",

js 文件，基本上 videojsYoutube 除了初始化 Youtube Tech.js 之外什么也不做。

import videojs from "video.js";
import videojsYoutube from "videojs-youtube";