Angular 2 中的 Nativescript-VideoPlayer

Question

这个问题可能更笼统，只是在 Nativescript 移动应用程序中包含 NPM 插件，但我将使用这个特定的插件作为示例。我已经阅读了从 Nativescript 站点添加第三方插件的文档，但我似乎仍然无法使用 Angular 2 和 Nativescript 使该插件与我的移动应用程序一起使用。

我安装插件使用：

tns plugin add nativescript-videoplayer

这是我的组件：

import { Component, ElementRef, ViewChild } from "@angular/core";
import { Video } from 'nativescript-videoplayer';


@Component({
    selector: "grandhall",
    templateUrl: "pages/grandhall/grandhall.html",
    styleUrls: ["pages/grandhall/grandhall-common.css", "pages/grandhall/grandhall.css"]
})

export class GrandHallComponent {

}

这是我的模板：

<StackLayout>
    <Label text="Grand Hall"></Label>
    <VideoPlayer:Video id="nativeVideoPlayer" controls="true" autoplay="true" height="280" src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
</StackLayout>

这就是插件文档所说的要在我的移动应用程序中显示视频所需执行的操作，但该视频未显示在页面上。我也在实际设备 iPhone 6 Plus 上测试这个，而不是在模拟器上。

我猜我需要做一些不同的事情来将插件中的视图包含在我的 Angular 2 模板中。请帮忙。

Answer 1

您需要这样调用 registerElement：

// somewhere at top of your component or bootstrap file import {registerElement} from "nativescript-angular/element-registry"; registerElement("VideoPlayer", () => require("nativescript-videoplayer").Video);

然后它可以在您的 UI 和 NativeScript Angular 文档中使用：https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements

Angular 2 中的 Nativescript-VideoPlayer

Nativescript-VideoPlayer in Angular 2

nativescript

angular