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:

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.