NativeScript JW Player

This plugin is provides an interface to use native jwplayer android/ios sdks in nativescript.

Register at jwplayer.com,create a Cloud-hosted player and get the script link.

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-jwplayer-web

Usage

Typescript/Javascript with XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:jw="nativescript-jwplayer-web">
   <GridLayout>
    <jw:JWPlayerWeb src="{{src}}" play="{{onPlay}}"
        pause="{{onPause}}"></jw:JWPlayerWeb>
</GridLayout>
</Page>

Angular

in app.module.ts

import { registerElement } from "@nativescript/angular";
registerElement(
  "JWPlayerWeb",
  () => require("nativescript-jwplayer-web").JWPlayerWeb
);

<GridLayout>
  <JWPlayerWeb
    [src]="src"
    (play)="onPlay($event)"
    (pause)="onPause($event)"
  ></JWPlayerWeb>
</GridLayout>

Plugin API

You can pass src property for video link and other details:

| option | required | type | | ------------- | -------- | --------------- | | link | Yes | string | | autostart | no | boolean | | floating | no | boolean | | responsive | no | boolean | | controls | no | boolean | | width | no | string(with px) | | playlist | Yes | Object | | advertising | no | Object |

wrap these properties in an object and pass it to the src.

Here is the how playlist and advertising can be set in src:

let src = {};
src["playlist"] = [{ file: "VIDEO_URL", label: "VIDEO_LABEL" }];
src["advertising"] = {
  client: "vast",
  adscheduleid: "AD_SCHEDULE_ID",
  schedule: [
    {
      offset: "pre", //pre|post|5%,10% etc...
      tag: "AD_TAG",
    },
  ],
};

Event list

Change in or initialization will trigger these events

ready; setupError; remove; adBidRequest; adBidResponse; adBlock; adBreakEnd; adBreakIgnored; adBreakStart; adClick; adCompanions; adComplete; adError; adImpression; adItem; adLoaded; adManager; adMeta; adPause; adPlay; adRequest; adSchedule; adSkipped; adStarted; adTime; adViewableImpression; adWarning; adsManager; beforeComplete; beforePlay; audioTracks; audioTrackChanged; bufferChange; captionsList; captionsChanged; cast; controls; displayClick; meta; metadataCueParsed; autostartNotAllowed; play; pause; playAttemptFailed; buffer; idle; complete; firstFrame; error; warning; playbackRateChanged; playlist; playlistItem; playlistComplete; levels; levelsChanged; visualQuality; fullscreen; resize; seek; seeked; time; viewable; mute; volume;

Function to manipulate the player

play();

pause();

resizePlayer(size: { width: string, height: string });

triggerAd(tag: string);


setControls(state:boolean);

setFloating(state:boolean);

getMute();

getVolume();

setMute(state: boolean);

//from 1-100
setVolume(volume: number);

getPercentViewable();

getViewable();

getPosition();

getDuration();

seek(position: number);

getFullscreen();

getHeight();

getWidth();

setPlaylistItemCallback(callback);

removePlaylistItemCallback();

getPlaylistItemPromise(index: number);

getQualityLevels();

getCurrentQuality();

getVisualQuality();

setCurrentQuality(index: number);

getPlaybackRate();

//from 0.25 to 4
setPlaybackRate(rate: number);

next();

getPlaylist();

getPlaylistItem();

getPlaylistIndex();

load(playlist: Array<Playlist>);

playlistItem(index: number);

stop();

getState();

getAdBlock();

pauseAd(state: boolean);

playAd(tag: string);

skipAd();

getAudioTracks();

getCurrentAudioTrack();

setCurrentAudioTrack(index: number);

addButton({ img, tooltip, callback, id, btnClass });

addCues(cues);

getControls();

getCues();

getSafeRegion();

removeButton(id: string);

setControls(state: boolean);

setCues(cues);

setCaptions(styles);

getCaptionsList();

getCurrentCaptions();

setCurrentCaptions(index: number);

getBuffer();

stopCasting();

Known issues

1. With fullscreen event, there is always a chromium error. This is a known issue on chromium during fullscreen.

2. Providing width in player configuration gives an error. However, height/width can be provided with resizePlayer() function.