Skip to content

Update Readme #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlexanderVansp wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update Readme #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 30 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -15,23 +20,39 @@ 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)

```
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:
```
<link rel="stylesheet" type="text/css" href="https://cdn.XXX.theoplayer.com/YOUR_KEY_HERE/ui.css">
<script type="text/javascript" src='https://cdn.XXX.theoplayer.com/YOUR_KEY_HERE/THEOplayer.js'></script>

```
6. In theoplayer.component.html add:

```
<div class="theoplayer-container video-js theoplayer-skin"></div>
```

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

```
Expand All @@ -55,34 +76,34 @@ 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.

```
<app-theoplayer></app-theoplayer>
```

10. Profit.
10. THEOplayer should be configured!

## Related articles

Expand Down