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

待办事项

[x] IOS
[x] toggleFullscreen IOS