Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/triniwiz/nativescript-youtubeplayer

youtube youtube-player

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/triniwiz/nativescript-youtubeplayer
Owner: triniwiz
License: apache-2.0
Created: 2017-07-14T23:29:31.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2022-12-07T23:21:56.000Z (almost 2 years ago)
Last Synced: 2024-10-04T02:34:58.438Z (about 2 months ago)
Topics: youtube, youtube-player
Language: TypeScript
Size: 4.97 MB
Stars: 35
Watchers: 6
Forks: 18
Open Issues: 27
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # NativeScript YoutubePlayer

[![npm](https://img.shields.io/npm/v/nativescript-youtubeplayer.svg)](https://www.npmjs.com/package/nativescript-youtubeplayer)

[![npm](https://img.shields.io/npm/dt/nativescript-youtubeplayer.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-youtubeplayer)

[![Build Status](https://travis-ci.org//triniwiz/nativescript-youtubeplayer.svg?branch=master)](https://travis-ci.org/triniwiz/nativescript-youtubeplayer)

## Installation

#### [NativeScript 7+](https://github.com/triniwiz/nativescript-plugins)

* `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](https://developers.google.com/youtube/android/player/register) to get

your api key

# Usage

### XML

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

Page element

```xml

```

### Angular

```

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

@NgModule({

    imports: [

    YoutubePlayerModule

    ],

    declarations: [

        AppComponent

    ],

    bootstrap: [AppComponent]

})

```

```xml

```

### Vue

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

```javascript

import Vue from 'nativescript-vue'

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

```

```vue

  

    

      

    

    

      

    

  

```

# 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](https://developers.google.com/youtube/player_parameters) *IOS only*

| isFullScreen | false  | boolean | - [ ] 
 | Returns if player is currently in fullscreen mode.

## Example Image

| IOS | Android|

| --- | ---|

|![IOS](https://i.imgur.com/GqNqzMY.png) | ![Android](https://i.imgur.com/0jpewm2.png)|

# TODO

* [x] IOS

* [x] toggleFullscreen IOS