Skip to content

A Javascript video player for dash and mp4 videos, support multi subs , overlays and ads or information, injection mp4 video ads.

License

Notifications You must be signed in to change notification settings

medazzo/fjplayer

Repository files navigation

fjplayer.js

FOSSA Status Build Status npm version

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

Demo application

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 .

About

A Javascript video player for dash and mp4 videos, support multi subs , overlays and ads or information, injection mp4 video ads.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published