Angular 9 import into component

[coreboarder]

I am encountering the following error when trying to play a YouTube clip in a player.

video.es.js:95 VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech.

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. MediaError {code: 4, message: "No compatible source was found for this media."}

I have the following setup: package.json "video.js": "^7.7.5", "videojs-playlist": "^4.3.1", "videojs-playlist-ui": "^3.7.0", "videojs-vimeo": "^2.0.2", "videojs-youtube": "^2.6.1",

angular.json "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/video.js/dist/video.min.js", "node_modules/videojs-playlist/dist/videojs-playlist.js", "node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.js", "node_modules/videojs-youtube/dist/Youtube.min.js" ] Player Component.html <video #target class="video-js" controls muted playsinline preload="none">

Player Component.ts import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

import videojs from 'video.js';

@Component({ selector: 'app-vjs-player', templateUrl: './vjs-player.component.html', styleUrls: ['./vjs-player.component.css'], encapsulation: ViewEncapsulation.None, }) export class VjsPlayerComponent implements OnInit, OnDestroy { @ViewChild('target') target: ElementRef; // see options: gotten from https://github.com/videojs/video.js/blob/mastertutorial-options.html @Input() options: { fluid: boolean, aspectRatio: string, autoplay: boolean, sources: { src: string, type: string, }[], }; player: videojs.Player;

constructor( private elementRef: ElementRef, ) { }

ngOnInit() { // instantiate Video.js this.player = videojs(document.querySelector('video'), this.options, function onPlayerReady() { console.log('onPlayerReady', this); }); }

ngOnDestroy() { // destroy player if (this.player) { this.player.dispose(); } } }

It looks like videojs does not understand what to do with YouTube and it would great if somebody can steer me in the right direction. I have searched and found no specific examples showing how to resolve the issue.

I have tried adding "import Youtube from 'videojs-youtube';" to the component without success.

[kosso]

I got the youtube plugin to work by importing it like this:

import videojs from 'video.js';
import 'videojs-youtube';