如何让 @vimeo/player 处理我的 Angular2/Typescript 项目？

Question

问题：

如何让@vimeo/player 处理我的 Angular2/Typescript 项目（特别是 Ionic2）？

说明：

试图让 vimeo player 与 Angular2/Typescript 一起工作。

npm install --save @vimeo/player

根据他们的文档，可以像这样使用该库：

如果您使用的是 webpack 或 rollup 之类的模块捆绑器，则导出的 对象将是 Player 构造函数（与它所在的浏览器不同 附加到 window.Vimeo):

import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

看起来超级有前途！但不起作用。

我尝试过的：

我已经安装了@vimeo/player 和@types/vimeo__player 我在 Ionic2 应用中创建了一个播放器组件。

player.ts：

import {Component, ViewChild} from '@angular/core';
import {NavController} from "ionic-angular/index";

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  @ViewChild('player_container') playerContainer;
  private player: Player;

  constructor(public navCtrl: NavController){}

  ngAfterViewInit() {
    // child is set
    this.player = new Player(this.playerContainer);
    console.log(Player);
  }

}

我使用 view child，但我也尝试过使用元素的 ID。

player.html

<div #player_container></div>

并得到以下错误：

Uncaught (in promise): TypeError: You must pass either a valid element 或有效身份证件。玩家@http://localhost:8100/build/main.js:102846:32 ngAfterViewInit@http://localhost:8100/build/main.js:74715:80 callProviderLifecycles@http://localhost:8100/build/main.js:11417:33 callElementProvidersLifecycles@http://localhost:8100/build/main.js:11392:35 callLifecycleHooksChildrenFirst@http://localhost:8100/build/main.js:11376:47 checkAndUpdateView@http://localhost:8100/build/main.js:12408:36 callWithDebugContext@http://localhost:8100/build/main.js:13462:47 检测变化@http://localhost:8100/build/main.js:10474:81 _viewAttachToDOM@http://localhost:8100/build/main.js:43884:53 _transition@http://localhost:8100/build/main.js:43976:34 onInvoke@http://localhost:8100/build/main.js:4406:43 运行@http://localhost:8100/build/polyfills.js:3:4146 http://localhost:8100/build/polyfills.js:3:13734 onInvokeTask@http://localhost:8100/build/main.js:4397:47 运行任务@http://localhost:8100/build/polyfills.js:3:4841 o@http://localhost:8100/build/polyfills.js:3:1898 调用@http://localhost:8100/build/polyfills.js:3:10674

如您所见，它编译但在运行时崩溃。

@types/vimeo__player 只是似乎没有完成，甚至在我导入@vimeo/player时似乎都没有注意到

issue on github regarding vimeo__player 似乎表明这是真的。

看起来模块解析正确地将其解析为 JS 模块，但仅仅是因为它没有首先找到类型。你确定吗 您是否正确包含了这些类型？ --listFiles 会告诉你，如果 包括在内。

附加：

Issued opened on Vimeo's github player page.

Answer 1

根据他们的文档

当库加载时，它将扫描您的页面以查找具有 Vimeo 属性的元素。每个元素必须至少有一个 data-vimeo-id 或 data-vimeo-url 属性才能自动创建嵌入。

所以在调用播放器的构造函数之前，基本上它需要一个带有“data-vimeo-id”属性或“data-video-url”属性的 div 标签，并分配有效值。

所以您可以使用 属性绑定 将视频 id（到 data-vimeo-id）或视频 url（到 data-video-url）分配给模板文件中的 div 标签。

<div [attr.data-vimeo-id]="videoId"> </div>

并将要嵌入的视频的视频 ID 分配给 Typescript 文件（在 ngOninit 中）中的变量“videoId”。 在这种情况下，也可以使用 url [attr.data-vimeo-url]="videoUrl";

Answer 2

如果您的 ViewChild 未定义（由于延迟加载等），您可以试试这个：

• ViewChildren 而不是 ViewChild；
• 在运行代码之前等待 DOM 可用；

代码：

import { Component, ViewChildren } from '@angular/core';
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  private player: Player;
  @ViewChildren('player_container') playerContainer;

  ngAfterViewInit() {
    /* wait DOM be available */
    this.playerContainer.changes.subscribe(item => {
        if (this.playerContainer.length) {
            /* DOM AVAILABLE */
            this.player = new Player(this.playerContainer.first.nativeElement);

            this.player.on('play', function() {
                console.log('played the video!');
            });

            this.player.getVideoTitle().then(function(title) {
                console.log('title:', title);
            });
        }
    })
  }
}

Answer 3

对于标准的typescript 项目，此导入语句有效。

import * as Player from "@vimeo/player/dist/player.js";

Answer 4

您的问题不是由@types/vimeo__player 引起的，也与您的构建系统/配置无关。

TypeScript 类型定义从不、从、从影响运行时的行为。即使编译时错误除了在控制台显示红色之外没有其他影响，JavaScript 仍然会被发出。

看看你得到的堆栈跟踪，我们也可以说Player被有效地导入了，既然你说没有编译时错误，那么在构建方面一切都很好.

事实上，错误说明了一切：TypeError: You must pass either a valid element or a valid id.。

Player 表示它需要 HTMLElement。

问题是，您使用的是来自 Angular 的 @ViewChild()。当您查询本机元素时，此装饰器将返回一个包装器。此包装器的类型为 ElementRef，并有一个名为 nativeElement 的属性，其中包含原始的 DOM 元素。

所以不要这样做：

this.player = new Player(this.playerContainer);

这样做：

this.player = new Player(this.playerContainer.nativeElement);

但你现在可能会想“为什么 TypeScript 没有产生类型错误，因为我没有传递原生元素？”。这是个好问题，我没有足够的数据来确定，但我认为您的导入可能不正确。

代替：

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";

你能试试吗？

import { Player } from '@vimeo/player';

查看 .d.ts 文件，看起来 Player 是一个命名导出。但你是对的，@vimeo/player 的类型定义不完整，或者与 JavaScript 库不同步。你应该注意 TypeScript 中的这类问题，尽管这种情况并非每天都会发生；)