NativeScript JW Player

此插件提供在 NativeScript 中使用原生 jwplayer android/ios sdks 的接口。

在 jwplayer.com 注册，创建一个云主机播放器并获取脚本链接。

安装

从命令提示符进入您的应用程序根目录并执行

tns plugin add nativescript-jwplayer-web

用法

Typescript/Javascript 与 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

在 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>

插件 API

您可以为视频链接和其他详情传递 src 属性

将这些属性包裹在一个对象中并传递给 src。

以下是 playlist 和 advertising 在 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",
    },
  ],
};

事件列表

更改或初始化将触发以下事件

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;

用于操作播放器的函数

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();

已知问题

1. 在全屏事件中，始终存在一个 chromium 错误。这是在全屏期间铬中已知的错误。

2. 在播放器配置中提供宽度会导致错误。但是，可以使用 resizePlayer() 函数提供高度/宽度。