nativescript-youtubeplayer
nativescript-youtubeplayer copied to clipboard
Published
20 hours ago •
triniwiz
triniwiz
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
- [x] IOS
- [x] toggleFullscreen IOS
triniwiz