nativescript-youtubeplayer
by triniwiz | v3.0.1
YoutubePlayer for Nativescript
npm i --save nativescript-youtubeplayer

NativeScript YoutubePlayer

npm npm Build Status

Installation

NativeScript 4x

  • tns plugin add nativescript-youtubeplayer

NativeScript 3x

Configuration

Android

Api key follow ➡ link to get your api key

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>

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
  • - [x]
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
IOS Android

TODO

  • [x] IOS
  • [x] toggleFullscreen IOS