Nemo's Parental Misguidance

    fjplayer

    0.3.2 • Public • Published

    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

    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 .

    Install

    npm i fjplayer

    DownloadsWeekly Downloads

    9

    Version

    0.3.2

    License

    Apache-2.0

    Unpacked Size

    4.97 MB

    Total Files

    48

    Last publish

    Collaborators

    • medazzo