Repository files navigation

• it's a 100 % customiazble video player base on html 5 video Player
• it's support dash and mp4 sources
• it support multi subs tracks
• it support overlays ads and any information overlays
• it support injection mp4 video ads in preroll,modroll or after rolling main video
• based on sdhakla player

dist/fjplayer.js for fjplayer styles and javascript code , no other dependecies is needed

<scripttype="text/javascript"src="/dist/fjplayer.min.js"></script>

In your html code , you need to add a div with a an Id to be used bu the player

<divid="playercontainer"></div>

In order to create a player and use , we need to create a playlist first :

varplaylist=newfjplayer.Playlist();

Then specify one or more elements and add them to the playlist

varforjaItemDashEncryptedWithPreAds={'FJType':'dash','FJTitle':'clear Forja movie itemDash ','FJClass':'vod','FJSrc':'http://127.0.0.1:8500/dashedCrypted/stream.mpd','FJDrm':{"FjLicenseServer":"http://127.0.0.1:3000"},'FJAds':[{'FJType':'video/mp4','FJSrc':'../videos/berber_pub.mp4','FJClass':'pre-roll','FJCanEscape':true,'FJUrl':'http://www.google.com'}]};varMp4SubsWithThumbs={'FJSrc':'https://content.jwplatform.com/videos/q1fx20VZ-kNspJqnJ.mp4','FJTitle':' title of movie itemOnly 1','FJClass':'vod','FJThumbs':'../vtt/thumbs.vtt','FJType':'video/mp4','FJSubtitles':[{'FJLabel':'English','FJLang':'en','FJSrc':'../vtt/sintel-en.vtt'},{'FJLabel':'Espagnol','FJLang':'es','FJSrc':'../vtt/sintel-es.vtt'},{'FJLabel':'Deutsch','FJLang':'de','FJSrc':'../vtt/sintel-de.vtt'}]};varclearSteam={'FJType':'dash','FJTitle':'clear Forja movie itemDash ','FJClass':'vod','FJSrc':'http://127.0.0.1:8500/bclear/stream.mpd'}playlist.addItem(Mp4SubsWithThumbs);playlist.addItem(clearSteam);

Now , you can create player where first argument is the playerKey and the second is the id of the div container in html and load the playlist;

varplayer=newfjplayer.Player('fjserverID1','playercontainer');player.loadPlaylist(playlist);

You can also add event listener ;

functionfjplayerEvent(e,args){console.warn(" We are having an event : ",e,args);};player.on(fjplayer.PlayerEvents.STREAM_LOADED,fjplayerEvent);

Finally, you can start playing , in this example we start play at element 0, looping is true , random play id false and autostart is true ;

player.startPlaylist(0,true,false,true);

cd fjplayernpm install

npm run build

Tests are run with Jest and Karma, to run tests :

npm test

You can run tests with coverage or tests while watchinf code sources changes :

npm run test:coveragenpm run test:watch

At the end of the run , result of coverage will be displayed.

To build docs , run :

npm run doc

Docs will be generated underdocs/generated,use browser on the index file :

firefox  docs/generated/index.html

To run http demo and developiong watching mode for javascript code :

npm run live

Demo app will be launched athttp://localhost:8080

A Playlist item will contains theses elements :

The object ads , must be inserted on arrayFJAds under item on playlist.The Ads is referring to advertissment.When it's time to play this ads , fjplayer will pause main video hide the controls , play the Ads and show a transparent banner up on which the countdown timer before the ads ends.

Ads also contains :

ifFJShowAt is negatif or bigger than ads duration , then the concerned ads wil not be player.

The object subtitle , must be inserted on arrayFJSubtitles under item on playlist.It permit to add a webvtt subtitles other that existing in mpd (in case of dash ) .it contains :

The object overlay , must be inserted on arrayFJOverlays under item on playlist.An overlay is a graphic layer above the video layer that conatains data like ads data.When user lick on an overlay a new opened will be opened with the urlFJOverUrl.Ii will be showing atFJOverShowAt and for a duration ofFJOverDuration .IfFJOverShowAt orFJOverShowAt+FJOverDuration is bigger than the item movie duration, then the overlays will not be schown at all .it contains :

This part of specs is not supported yet by playerThe object drm , is referring to Digital right managment and it's contains data about media drm .This object is managed onlywhenFJType isdash .It must be inFJDrm fieldit contains :

The Drm schemefjserver is a clear key based scheme done onfjserver .