VideoJS 未在 angular 5 中播放

Question

我是 angular 5 的新手。我正在尝试添加 videojs inn angular 5 。我的代码如下：- html代码

<video *ngIf="url" id="video"class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"controls preload="auto">
    <source [src]="url" type="application/x-mpegURL" />
</video>

ts代码

import { videojs } from 'video.js';

private _elementRef: ElementRef;
@Input() idx: string;
@Input() url: any;
private player: any;
ngAfterViewInit() {
 let el = 'video_' + this.idx;
 this.player = videojs(document.getElementById(el), {}, function() {
  let myPlayer = this, id = myPlayer.id();
  let aspectRatio = 264/640;
  function resizeVideoJS(){
    let width = document.getElementById(id).parentElement.offsetWidth;
    myPlayer.width(width);
    myPlayer.height( width * aspectRatio );
  }
  resizeVideoJS();
  window.onresize = resizeVideoJS;
 });
}

我收到一个错误，因为

ERROR TypeError: video_js_1.videojs is not a function

请帮忙

Answer 1

替换：

从'video.js'导入{videojs}；

与

从 'video.js';

导入 * 作为 videojs

Answer 2

对于Angular 5,6,7,8

做这些事情。

npm 安装jquery --保存
npm 安装video.js --保存
npm install videojs-youtube --save //如果你想支持youtube
npm install videojs-resolution-switcher //如果需要，可以支持 youtube 分辨率
编辑angular.json文件

"styles": [

"./node_modules/video.js/dist/video-js.min.css",

"./node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css",

"src/styles.css"

],

"scripts": [ "./node_modules/jquery/dist/jquery.js",

"./node_modules/video.js/dist/video.min.js",

"./node_modules/videojs-youtube/dist/Youtube.min.js",

"./node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"

]
Component.html模板
要观看此视频，请启用 JavaScript，并考虑升级到支持 HTML5 视频的网络浏览器
Component.ts TypeScript 文件

从“@angular/core”导入{组件、OnInit、OnDestroy、AfterViewInit}；

declare var videojs: any;

@Component({
  selector: 'app-our-videos',
  templateUrl: './our-videos.component.html',
  styleUrls: ['./our-videos.component.css']
})
export class OurVideosComponent implements OnInit, OnDestroy, AfterViewInit {

  private videoUrl = 'http://www.youtube.com/watch?v=kfd288W8oMs';
  private originData: string = window.location.origin;
  private videoJSplayer: any;
  public posterUrl = '';
  public width = '900';
  public height = '506';

  private  dataSetup: any = {
    'aspectRatio': '640:267',
    'preload': 'none',
    'controls': true,
    'muted': false,
    'autoplay': false,
    'playbackRates': [0.5, 0.75, 1, 1.25, 1.5, 2],
    'techOrder': ['html5', 'youtube'],
    'sources': [{
      'type': 'video/youtube',
      'src': this.videoUrl,
      'youtube': {
        'ytControls': 2,
        'iv_load_policy': 3,
        'color': 'red',
        'modestbranding': 1,
        'rel': 0,
        'fs': 1,
        'customVars': {
          'wmode': 'transparent',
          'enablejsapi': 1,
          'origin': this.originData
        }
      }
    }],
    'plugins': {
      'videoJsResolutionSwitcher': {
       'default': 'low',
       'dynamicLabel': true
      }
    }
  };

  public dataSetupString: string = JSON.stringify(this.dataSetup);

  private changeVideo( newId: string ): void {
    const newYoutubeUrl: string = 'http://www.youtube.com/watch?v=' + newId;
    this.videoJSplayer.src({type: 'video/youtube', src: newYoutubeUrl});
  }

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit(): void {
    this.initVideoJs();
  }

  initVideoJs() {
    this.videoJSplayer = videojs('myVideoPlayer2');
  }

  ngOnDestroy() {
    this.videoJSplayer.dispose();
  }
}

VideoJS 未在 angular 5 中播放

VideoJS is not playing in angular 5

video.js

angular