Question

我有一个Angular 2（最新）有打字稿（最新）的应用程序。我为视频创建了一个组件，一切正常。现在我想添加shaka-player但是，我得到了这个： TS2307：找不到模块'shaka-player'。

我安装了shaka-player，它被列在node_modules文件夹中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';

import { AppComponent } from './app.component';

import * as shaka from 'shaka-player';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

以下是我在Angular 2应用程序中设法使用shaka-player的方法。

编译库

（参见此处的文档：https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html）

转到node_modules/shaka-player/build/ 运行build.py脚本。

然后在node_modules/shaka-player/dist/中有不同的文件，为简单起见，我选择了shaka-player.compiled.js。

使用图书馆

在我的组件类中，我需要文件并将其分配给变量：

shaka = require('../../../../node_modules/shaka-player/dist/shaka-player.compiled');

然后我可以使用this表示法的类的这个属性： this.shaka.Player.isBrowserSupported()

然后，您可以按照官方文档忘记使用this.shaka而不只是shaka：https://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html

模块化方法

要在应用上重复使用该库，可以从单独的shaka文件中导出上述.ts变量。

export var shaka = require('../../../../node_modules/shaka-player/dist/shaka-player.compiled');

然后在组件文件中可以使用ES6 import语句：

import {shaka} from '../../common/js-libs/shaka-player'

从此处可以使用与文档中完全相同的库，无需使用this表示法。

创建从import语句复制shaka的类的属性完全取决于您。

Answer 2

在角度2（或更高）中使用shaka播放器的另一种方法是将其作为外部库导入angular-cli.json

1）安装shaka-player

npm install shaka-player --save

2）在第一步之后打开.angular.cli.json（v5）|| angular.json（v6）

并在脚本中添加此代码段。

../ node_modules /沙卡玩家/ DIST /沙卡-player.compiled.js

3）将Video元素添加到模板

    <video id="video"
           width="640"
           poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
           controls autoplay></video>

4）在你的组件中：

import { Component, OnInit } from '@angular/core';
declare var shaka: any;
@Component({
  selector: 'app-shaka-player',
  templateUrl: './shaka-player.component.html',
  styleUrls: ['./shaka-player.component.scss']
})
export class ShakaPlayerComponent implements OnInit {
  manifestUri = '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
  constructor() { }

  ngOnInit() {
    this.initApp();
  }

  initApp() {
    // Install built-in polyfills to patch browser incompatibilities.
    shaka.polyfill.installAll();

    // Check to see if the browser supports the basic APIs Shaka needs.
    if (shaka.Player.isBrowserSupported()) {
      // Everything looks good!
      this.initPlayer();
    } else {
      // This browser does not have the minimum set of APIs we need.
      console.error('Browser not supported!');
    }
  }

  initPlayer() {
  // Create a Player instance.
  const video = document.getElementById('video');
  const player = new shaka.Player(video);

    // Attach player to the window to make it easy to access in the JS console.
//window.player = player;

// Listen for error events.
player.addEventListener('error', this.onErrorEvent);

// Try to load a manifest.
// This is an asynchronous process.
player.load(this.manifestUri).then(function () {
  // This runs if the asynchronous load is successful.
  console.log('The video has now been loaded!');
}).catch(error => {this.onError(error)});  // onError is executed if the asynchronous load fails.
}

onErrorEvent(event) {
  // Extract the shaka.util.Error object from the event.
  this.onError(event.detail);
}

onError(error) {
  // Log the error.
  console.error('Error code', error.code, 'object', error);
}

}

Answer 3

您应该在组件

中添加以下代码

import * as shaka from 'shaka-player';
@Component({
  selector: 'app-detailpage',
  templateUrl: '<video #video id="video"
                    controls autoplay></video>  ',
  styleUrls: ['./detailpage.component.css'],
 })
export class DetailpageComponent implements OnInit {
  @ViewChild('video') videoElement: ElementRef;
   ngOnInit() {
shaka.polyfill.installAll();
if (shaka.Player.isBrowserSupported()) {
  const video = this.videoElement.nativeElement;
  const player = new shaka.Player(video);
  const manifestUri = 'your rul';

  player.addEventListener('error', ErrorEvent);
  player.load(manifestUri).then(function() {
    console.log('The video has now been loaded!');
  }).catch(onerror);  
 } else {
  console.error('Browser not supported!');
 }
}

如何将shaka-player导入角度2应用程序

3 个答案: