Question

我是角度5的新手。我正在试图添加videojs inn angular 5。我的代码如下： - HTML代码

passw

ts代码

<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>

我收到错误

ERROR TypeError：video_js_1.videojs不是函数

请帮助

Answer 1

替换：

从“ video.js”导入{videojs};

与

从'video.js'导入*作为videojs;

Answer 2

对于Angular 5,6,7,8

做这些事情。

npm install jquery --save
npm install video.js-保存
npm install videojs-youtube --save ///如果需要，可获取youtube支持
npm install videojs-resolution-switcher ///如果需要，可用于youtube分辨率支持
编辑angular.json文件

“样式”：[

“ ../ node_modules / video.js / dist / video-js.min.css”，

“。/node_modules / videojs-resolution-switcher / lib / videojs-resolution-switcher.css”，

“ src / styles.css”

]，

“脚本”：[ “ ./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”导入{Component，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没有以角度5播放

2 个答案: