NativeScript YoutubePlayer

Installation

NativeScript 7+

• ns plugin add @triniwiz/nativescript-youtubeplayer

NativeScript 4x

• tns plugin add nativescript-youtubeplayer

NativeScript 3x

• tns plugin add [email protected]

Configuration

Android

Api key follow ➡ link to get your api key

Usage

XML

IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the Page element

<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

Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

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

Method	Default	Type	Description
play()		void	Starts video playback of the currently cued / loaded video.
stop()		void	Stops and cancels loading of the current video.
destroy()		void	Destroy the video player and free resources.
pause()		void	Pauses the currently playing video.
isPlaying()	false	boolean	Returns is current video is playing.
toggleFullscreen()		void	Toggle fullscreen mode.

Properties

Property	Default	Type	Required	Description
src	null	string		Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
options	null	Object		Player options available IOS only
isFullScreen	false	boolean		Returns if player is currently in fullscreen mode.

Example Image

IOS	Android

TODO

• IOS
• toggleFullscreen IOS