This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.
Note that this information is for a basic player in a local testing environment. Additional information may be needed for specific cases.
- Make sure you have the Angular CLI installed
npm install -g @angular/cli
-
If needed, create a new workspace and initial application ng new appname
-
In the root project, create a new component for the player (in this case appname)
cd appname
ng generate component theoplayer
- add the THEOplayer.js files to the root project
- In index.html add the /THEOplayer.js as a script tag and /ui.css as a stylesheet
- In theoplayer.component.html add
<div class="theoplayer-container video-js theoplayer-skin"></div>
- In theoplayer.component.ts add
import { Component, OnInit } from '@angular/core';
import * as THEOplayer from '../../../THEOplayer.js';
@Component({
selector: 'app-theoplayer',
templateUrl: './theoplayer.component.html',
styleUrls: ['./theoplayer.component.css']
})
export class TheoplayerComponent implements OnInit {
constructor() { }
ngOnInit() {
this.createPlayer();
}
createPlayer() {
const element = document.querySelector('.theoplayer-container');
const player = new THEOplayer.Player(element, {
libraryLocation : ''
});
player.source = {
sources : [{
src : '//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8',
type : 'application/x-mpegurl' // sets type to MPEG-DASH
}]
};
}
}
Then
import * as THEOplayer from '../../../THEOplayer.js;
will make sure to get everything needed from our sdk.
- In app.component.html add the following code to display the player in the app component.
<app-theoplayer></app-theoplayer>
- Profit.