https://github.com/theoplayer/samples-angular

A sample app integrating THEOplayer.js as an Angular component.
https://github.com/theoplayer/samples-angular

angular angularjs theoplayer video-player

Last synced: 15 days ago
JSON representation

A sample app integrating THEOplayer.js as an Angular component.

• Host: GitHub
• URL: https://github.com/theoplayer/samples-angular
• Owner: THEOplayer
• Created: 2020-03-24T09:48:19.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T16:20:21.000Z (about 2 years ago)
• Last Synced: 2023-03-07T05:37:12.931Z (almost 2 years ago)
• Topics: angular, angularjs, theoplayer, video-player
• Language: TypeScript
• Homepage:
• Size: 801 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 29
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# THEOplayer Angular Sample

## License

This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.

## 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.

1. Make sure you have the Angular CLI installed

```

npm install -g @angular/cli

```

2. If needed, create a new workspace and initial application

   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

```

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

```



```


7. 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.

9. In app.component.html add the following code to display the player in the app component.

```

```

10. Profit.

## Related articles

https://angular.io/guide/quickstart