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.
For help getting started with a new Angular app, check out the Angular CLI. If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add sunbird-video-player library to it.
Just run the following:
ng add @project-sunbird/sunbird-video-player-v9It will install sunbird-video-player for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option
ng add @project-sunbird/sunbird-video-player-v9 --project myProjectIf you prefer not to use schematics or want to add sunbird-video-player-v9 to an older project, you'll need to do the following:
Click here to show detailed instructions!
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"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/"
},
{
"glob": "**/*",
"input": "node_modules/@project-sunbird/sunbird-quml-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",
"dist/sunbird-video-player/lib/assets/videojs-transcript-click.min.js"
]
...
...
},
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 { }
Use the mock config in your component to send input to VIDEO player Click to see the mock - playerConfig
var playerConfig = {
"context": {
"mode": "play", // To identify preview used by the user to play/edit/preview
"authToken": "", // Auth key to make api calls
"sid": "7283cf2e-d215-9944-b0c5-269489c6fa56", // User sessionid on portal or mobile
"did": "3c0a3724311fe944dec5df559cc4e006", // Unique id to identify the device or browser
"uid": "anonymous", // Current logged in user id
"channel": "505c7c48ac6dc1edc9b08f21db5a571d", // Unique id of the channel(Channel ID)
"pdata": {
"id": "sunbird.portal", // Producer ID. For ex: For sunbird it would be "portal" or "genie"
"ver": "3.2.12", // Version of the App
"pid": "sunbird-portal.contentplayer" // Optional. In case the component is distributed, then which instance of that component
},
"contextRollup": { // Defines the content roll up data
"l1": "505c7c48ac6dc1edc9b08f21db5a571d"
},
"tags": [ // Defines the tags data
""
],
"cdata": [], // Defines correlation data
"timeDiff": 0, // Defines the time difference
"objectRollup": {}, // Defines the object roll up data
"host": "", // Defines the from which domain content should be load
"endpoint": "", // Defines the end point
"userData": { // Defines the user data firstname & lastname
"firstName": "",
"lastName": ""
}
},
"config": {
"traceId": "afhjgh", // Defines trace id
"sideMenu": {
"showShare": true, // show/hide share button in side menu. default value is true
"showDownload": true, // show/hide download button in side menu. default value is true
"showReplay": true, // show/hide replay button in side menu. default value is true
"showExit": true, // show/hide exit button in side menu. default value is true
},
// tslint:disable-next-line:max-line-length
"transcripts": [] // for default selection we need this , ex: ['kn', 'en'] the last element in the array will be used for default selection and no need of default selection than no need send this in config or send empty array [] or ['off']
},
"metadata": { // Content metadata json object (from API response take -> response.result.content)
"transcripts": [] // Defines the details of the transcripts data array and each object in array conatins details of language,languageCode, identifier, artifactUrl of each transcript
},
} | Property Name | Description | Default Value |
|---|---|---|
context |
It is an object it contains the uid,did,sid,mode etc., these will be logged inside the telemetry |
{} |
mode |
It is string to identify preview used by the user to play/edit/preview |
play |
authToken |
It is string and Auth key to make api calls |
'' |
sid |
It is string and User sessionid on portal or mobile |
'' |
did |
It is string and Unique id to identify the device or browser |
'' |
uid |
It is string and Current logged in user id |
'' |
channel |
It is string which defines channel identifier to know which channel is currently using. |
in.sunbird |
pdata |
It is an object which defines the producer information it should have identifier and version and canvas will log in the telemetry |
{'id':'in.sunbird', 'ver':'1.0'} |
contextRollup |
It is an object which defines content roll up data |
{} |
tags |
It is an array which defines the tag data |
[] |
objectRollup |
It is an object which defines object rollup data |
{} |
host |
It is string which defines the from which domain content should be load |
window.location.origin |
userData |
It is an object which defines user data |
{} |
cdata |
It is an array which defines the correlation data |
[] |
| Property Name | Description | Default Value |
|---|---|---|
config |
It is an object it contains the sideMenu, these will be used to configure the canvas |
{ traceId: "12345", sideMenu: {"showShare": true, "showDownload": true, "showReplay": true, "showExit": true}} |
config.traceId |
It is string which defines the trace id |
'' |
config.sideMenu.showShare |
It is boolean to show/hide share button in side menu |
true |
config.sideMenu.showDownload |
It is boolean to show/hide download button in side menu |
true |
config.sideMenu.showReplay |
It is boolean to show/hide replay button in side menu |
true |
config.sideMenu.showExit |
It is boolean to show/hide exit button in side menu |
true |
config.transcripts |
It is Array which defines the transcripts default selection details |
[] |
metadata |
It is an object which defines content metadata json object (from API response take -> response.result.content) |
{} |
metadata.transcripts |
It is Array which is having the details of the transcripts data |
[] |
| 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,action | playerEvent, telemetryEvent |
For existing apps, follow these steps to begin using.
Click to see the steps - InstallPackages
Click to see the steps - IncludeStyles , but use
src/global.scss instead of src/styles.css in styles.
Click to see the steps - Import
<sunbird-video-player [playerConfig]="playerConfig" (playerEvent)="playerEvents($event)"
(telemetryEvent)="playerTelemetryEvents($event)"></sunbird-video-player>
Note : An additional property named
actioncan be added to the above statement to implement pause and play functionality for the video player.
Click to see the input data - playerConfig
Click to see the sample code - sampleCode
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-playerconst videoElement = document.createElement('sunbird-video-player');
-
Pass data using
player-configvideoElement.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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent