fjplayer.js

fjplayer

What is fjplayer

• 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

Using fjplayer

include fjplayer file

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

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

html

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

<div id="playercontainer">
</div>

java script coding

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

var playlist = new fjplayer.Playlist();

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

    var forjaItemDashEncryptedWithPreAds = {
         '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'
         }]
     };
    var Mp4SubsWithThumbs = {
         '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'
         }]
     };
   var clearSteam = {
         '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;

var player = new fjplayer.Player('fjserverID1', 'playercontainer');
player.loadPlaylist(playlist);

You can also add event listener ;

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

fjplayer Developing

Setup

cd fjplayer
npm install

Build min files

npm run build

Test

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:coverage
npm run test:watch

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

Build docs

To build docs , run :

npm run doc

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

firefox  docs/generated/index.html

Run demo

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

npm run live

Demo app will be launched at http://localhost:8080

Playlist Item

A Playlist item will contains theses elements :

fjplayer ads

The object ads , must be inserted on array FJAds 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 :

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

fjplayer subtitle

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

fjplayer overlay

The object overlay , must be inserted on array FJOverlays 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 url FJOverUrl. Ii will be showing at FJOverShowAt and for a duration of FJOverDuration . If FJOverShowAt or FJOverShowAt+FJOverDuration is bigger than the item movie duration, then the overlays will not be schown at all . it contains :

fjplayer drm

This part of specs is not supported yet by player The object drm , is referring to Digital right managment and it's contains data about media drm . This object is managed onlywhen FJType is dash . It must be in FJDrm field it contains :

The Drm scheme fjserver is a clear key based scheme done on fjserver .