# **fjplayer.js** #
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fmedazzo%2Ffjplayer.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fmedazzo%2Ffjplayer?ref=badge_shield)
[![Build Status](https://travis-ci.com/medazzo/fjplayer.svg?branch=master)](https://travis-ci.com/medazzo/fjplayer)
[![npm version](https://badge.fury.io/js/fjplayer.svg)](https://badge.fury.io/js/fjplayer)


# **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

```html
<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 

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

### java script coding ###
In order to create a player and use , we need to create a playlist first :
 
 ```javascript
var playlist = new fjplayer.Playlist();
```

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

```javascript
    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;

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

You can also add event listener ;

```javascript
   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 ;

```javascript 
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](docs/generated/index.html) :

```
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](https://github.com/vlanard/videoscripts) |
| 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** .