NativeScript YoutubePlayer

安装

NativeScript 4x

tns plugin add nativescript-youtubeplayer

NativeScript 3x

tns plugin add [email protected]

配置

Android

Api key 遵循 ➡ 链接获取您的 api key

使用方法

XML

重要：确保在 Page 元素中包含 xmlns:ui="nativescript-youtubeplayer"

<ui:YoutubePlayer id="player" apiKey="AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0" src="{{src}}" height="250" width="100%" backgroundColor="gray" />

Angular

import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

@NgModule({
    imports: [
    YoutubePlayerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

<YoutubePlayer id="player" apiKey="AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0" src="{{src}}" height="250" width="100%" backgroundColor="gray"></YoutubePlayer>

Vue

在 app.js 中注册插件（或根据您的应用设置： app.ts，main.js 等）

import Vue from 'nativescript-vue'
Vue.registerElement('YoutubePlayer', () => require('nativescript-youtubeplayer').YoutubePlayer)

<template>
  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <StackLayout>
      <YoutubePlayer src="wH_0_pijbZY" apiKey="your-api-key"/>
    </StackLayout>
  </Page>
</template>

API

方法	默认	类型	描述
play()		void	开始播放当前已排程/加载的视频。
stop()		void	停止并取消加载当前视频。
destroy()		void	销毁视频播放器并释放资源。
pause()		void	暂停正在播放的视频。
isPlaying()	false	boolean	返回当前视频是否正在播放。
toggleFullscreen()		void	切换全屏模式。

属性

属性	默认	类型	必需	描述
src	null	string	- [x]	设置要播放的视频Id，例如（Z0LWuKQcrUA）=> https://www.youtube.com/watch?v=Z0LWuKQcrUA
options	null	Object	- [ ]	播放器选项可用仅限 IOS
isFullScreen	false	boolean	- [ ]	返回播放器是否当前处于全屏模式。

示例图片

IOS	Android

TODO

[x] IOS
[x] toggleFullscreen IOS