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 :

| item field | mandatory | value | Description | |-------------------|-----------|-------------------------------|---------------| | FJClass | YES | 'vod' or 'live' | the class of the stream | | FJType | YES | 'video/mp4' or 'dash' | the type of the stream| | FJTitle | YES | non empty string | the title to be shown when playing| | FJSrc | YES | non empty url string | the url of the stream to be played| | FJDownload | NO | non empty url string | activate download icon and open new widown on url when icon is clicked| | FJShare | NO | non empty url string | activate share icon and open new widown on url when icon is clicked| | FJBack | NO | non empty url string | activate back arow icon and locate current window to url when icon is clicked| | FJUpTitle | NO | boolean | show of not the title in player up| | FJSrc | YES | non empty url string | the url of the stream to be played| | FJDrm | NO | integer | it's an object containing drm security information| | FJPoster | NO | url to image poster | url to poster to be showing wen loading | | FJThumbs | NO | url to image thumbs | url to file containing tooltip thumbnail images for video associated with WebVTT : to generate this file you can visit github video scripts | | FJSubtitles | NO | array of subtitles Items |
| FJAds | NO | array of video ads Items |
| FJOverlays | NO | array of overlays Items |

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 :

| ads item field | mandatory | value | Description | |-------------------|-----------|-----------------------|---------------| | FJType | YES | 'video/mp4' or 'dash' | the type of the stream| | FJSrc | YES | non empty url string | the url of the stream to be played| | FJClass | YES | 'pre-roll' , 'mid-roll' or 'post-roll' | pre: before main video, mid: in the middle and post: after the main video | | FJCanEscape | YES | boolean | display a button to escape ads or not | | FJFJUrlSrc | YES | non empty url string | the url of the advertiser, when user click on video when ads playing , a windows will be opened on this url| | FJShowAt | YES (mid-roll) | integer | the number of seconds use to start the Ads if it mid-roll class|

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 :

| subtitle field | mandatory | value | Description | |-------------------|-----------|-----------------------|---------------| | FJLabel | YES | non empty string | string label of subtitles to be shown on control | | FJSrc | YES | non empty url string | url of the web vtt subtitles file | | FJLang | YES | fr or en or de ... | ISO descripton of language |

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 :

| overlay field | mandatory | value | Description | |-------------------|-----------|-----------------------|---------------| | FJData | YES | non empty string | html data that will be putted on div overlay | | FJUrl | YES | non empty url string | url to open in new window to when the user click on overlay | | FJDuration | YES | integer | in seconds , the duration of overlay show | | FJShowAt | YES | integer | in seconds , the time in video to start to schow the overlay |

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 :

| drm field | mandatory | value | Description | |-------------------------------|-----------|---------------------------------------|---------------| | FJDrmScheme | YES | 'forja','playReady,'clearKey' or 'widevine' | drm Scheme to use | | FJLicenceServer | YES | non empty url string | url of the Licensing server | | FJHeadersOnLicenseRequest | NO | object contains headers and value | headers and value to be add to request when asking for license | | FJHeadersOnSegmentsRequest | NO | object contains headers and value | headers and value to be add to request when asking for segment |

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