diff --git a/README.md b/README.md index 2d85619..d93aea4 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,11 @@ This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer. +## Requirements: + +A web SDK created at https://portal.theoplayer.com ! +Make sure to keep your Library Location "https://cdn.XXX.theoplayer.com/YOUR_KEY_HERE" at hand. This can be found in the overview on the Portal of your freshly created SDK. Also download your 'THEOplayer.js' file by going to the following link: https://cdn.XXX.theoplayer.com/YOUR_KEY_HERE/THEOplayer.js + ## Step-by-step guide: Note that this information is for a basic player in a local testing environment. Additional information may be needed for specific cases. @@ -15,7 +20,9 @@ npm install -g @angular/cli ``` 2. If needed, create a new workspace and initial application - ng new appname +``` +ng new appname +``` 3. In the root project, create a new component for the player (in this case appname) @@ -23,15 +30,29 @@ npm install -g @angular/cli cd appname ng generate component theoplayer ``` +Note that we are using a project with CSS for the styling. -4. add the THEOplayer.js files to the root project -5. In index.html add the /THEOplayer.js as a script tag and /ui.css as a stylesheet -6. In theoplayer.component.html add +4. Add the THEOplayer.js file to the root of the project. +5. In index.html add the /THEOplayer.js as a script tag and /ui.css as a stylesheet. These should look something like this: +``` + + + +``` +6. In theoplayer.component.html add: ```
``` +If you want to change the size of your player you could add the following to theoplayer.component.css +``` +.theoplayer-container { + width: 480px; + height: 300px; +} +``` + 7. In theoplayer.component.ts add ``` @@ -55,26 +76,26 @@ export class TheoplayerComponent implements OnInit { const element = document.querySelector('.theoplayer-container'); const player = new THEOplayer.Player(element, { - libraryLocation : '' + libraryLocation : 'https://cdn.XXX.theoplayer.com/YOUR_KEY_HERE' }); player.source = { sources : [{ src : '//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8', - type : 'application/x-mpegurl' // sets type to MPEG-DASH + type : 'application/x-mpegurl' // sets type to HLS }] }; } } ``` -Then +Make sure the following line is at the top: ``` import * as THEOplayer from '../../../THEOplayer.js; ``` -will make sure to get everything needed from our sdk. +This will make sure to get everything needed from our SDK. 9. In app.component.html add the following code to display the player in the app component. @@ -82,7 +103,7 @@ will make sure to get everything needed from our sdk.