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

Question

我有一个Angular 2(最新的)与typescript(最新的)应用程序工作。我为视频创建了一个组件，一切工作正常。现在我想添加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的另一种方法是将其作为外部库导入angular-cli.json中

1)安装shaka-player

npm install shaka-player --save

2)第一步后打开.angular.cli.json (v5) || angular.json (v6)

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

../node_modules/shaka-player/dist/shaka-player.compiled.js

3)在模板中添加视频元素

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

这是我如何在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

模块化方法

对于要在应用程序中重用的库，可以从单独的.ts文件中导出上面提到的shaka变量。

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

然后，在组件文件中可以使用ES6导入语句：

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

从这里可以像在文档中一样使用该库，不需要使用this表示法。

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

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!');
 }
}