@project-sunbird/sunbird-video-player-v9

Contains Video player library components powered by angular. These components are designed to be used in sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability, maintainability hence reducing the redundant development effort significantly.

Usage no npm install needed!

<script type="module">
  import projectSunbirdSunbirdVideoPlayerV9 from 'https://cdn.skypack.dev/@project-sunbird/sunbird-video-player-v9';
</script>

README

Video player library for Sunbird platform!

Contains Video player library components powered by angular. These components are designed to be used in sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability, maintainability hence reducing the redundant development effort significantly.

Getting Started

For help getting started with a new Angular app, check out the Angular CLI. For existing apps, follow these steps to begin using .

Step 1: Install the packages

npm install @project-sunbird/sunbird-video-player-v9 --save
npm install @project-sunbird/sunbird-quml-player-v9 --save
npm install @project-sunbird/sb-styles --save
npm install @project-sunbird/client-services --save
npm install lodash-es --save
npm install ngx-bootstrap --save
npm install jquery --save
npm install video.js --save
npm install videojs-contrib-quality-levels --save
npm install videojs-http-source-selector --save

Step 2: Include the styles, scripts and assets in angular.json

"styles": [
...
...
"src/styles.css",
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
"./node_modules/video.js/dist/video-js.min.css",
"./node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs.markers.min.css",
"./node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css"
],
"scripts": [
...
...
"node_modules/jquery/dist/jquery.min.js",
"node_modules/video.js/dist/video.js",
"node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs-markers.js",
"node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js",
"node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js"
]

Add following under architect.build.assets

 {
    ...
    "build": {
    
    "builder": "@angular-devkit/build-angular:browser",
    
    "options": {
        ...
        ...

        "assets": [
        
           ...
           ...
            
            {
                "glob": "**/*.*",
                "input": "./node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/",
                "output": "/assets/"
            }
        
        ],

    "styles": [
    
    ...
    
    "./node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
    "./node_modules/video.js/dist/video-js.min.css",
    "./node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs.markers.min.css",
    "./node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css"
    ],
    "scripts": [
     ...
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/video.js/dist/video.js",
     "node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs-markers.js",
     "node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js",
     "node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js"
     ]
    ...
    ...

},

Step 3: Import the modules and components

Import the NgModule where you want to use. Also create a question-cursor-implementation.service

import { SunbirdVideoPlayerModule } from '@project-sunbird/sunbird-video-player-v9';
import { QuestionCursor } from '@project-sunbird/sunbird-quml-player-v9';
import { QuestionCursorImplementationService } from './question-cursor-implementation.service';


@NgModule({
    ...
    
    imports: [SunbirdVideoPlayerModule],
    providers: [{ provide: QuestionCursor, useClass: QuestionCursorImplementationService }],
    
    ...
})


export class TestAppModule { }

Step 4: Send input to render Video player

Use the mock config in your component to send input to Video player Click to see the mock - playerConfig

Available components

|Feature| Notes| Selector|Code|Input|Output |--|--|--|------------------------------------------------------------------------------------------|---|--| | Video Player | Can be used to render videos | sunbird-video-player| <sunbird-video-player [playerConfig]="playerConfig"><sunbird-video-player>|playerConfig|playerEvent, telemetryEvent|

Use as web components

Import this library in any web application and use the custom component.

Follow below-mentioned steps to use it in plain javascript project:

  • Insert library as below:

    <script type="text/javascript" src="sunbird-video-player.js"></script>
    
  • Create a asset folder and copy all the files from here, library requires these assets internally to work well.

  • Get sample playerConfig from here: playerConfig

  • Pass the QuestionListAPI baseUrl for eg.

    window.questionListUrl = 'https://staging.sunbirded.org/api/question/v1/list';
    window.questionSetBaseUrl = 'https://staging.sunbirded.org/api/questionset';
    
  • Create a custom html element: sunbird-video-player

    const  videoElement = document.createElement('sunbird-video-player');
    
  • Pass data using player-config

    videoElement.setAttribute('player-config', JSON.stringify(playerConfig));
    

    Note: Attribute should be in string type

  • Listen for the output events: playerEvent and telemetryEvent

    videoElement.addEventListener('playerEvent', (event) => {
        console.log("On playerEvent", event);
    });
    videoElement.addEventListener('telemetryEvent', (event) => {
        console.log("On telemetryEvent", event);
    });
    
  • Append this element to existing element

    const  myPlayer = document.getElementById("my-player");
    myPlayer.appendChild(qumlPlayerElement);
    
  • Refer demo example