Skip to main content
Version: 4.12.7

Getting started with Angular

A brief guide on how to build a THEOplayer in an Angular environment.

Note that this information is for a basic player in a local testing environment. Additional information may be needed for specific cases.

Step-by-step guide:

  1. Make sure you have the Angular CLI installed
npm install -g @angular/cli
  1. If needed, create a new workspace and initial application ng new appname

  2. In the root project, create a new component for the player (in this case appname)

cd appname
ng generate component theoplayer
  1. add the THEOplayer.js files to the root project
  2. In index.html add the /THEOplayer.js as a script tag and /ui.css as a stylesheet
  3. In theoplayer.component.html add
<div class="theoplayer-container video-js theoplayer-skin"></div>
  1. In theoplayer.component.ts add
import { Component, OnInit } from "@angular/core";
import * as THEOplayer from "../../../THEOplayer.js";

selector: "app-theoplayer",
templateUrl: "./theoplayer.component.html",
styleUrls: ["./theoplayer.component.css"]
export class TheoplayerComponent implements OnInit {
constructor() {}

ngOnInit() {

createPlayer() {
const element = document.querySelector(".theoplayer-container");

const player = new THEOplayer.Player(element, {
libraryLocation: ""

player.source = {
sources: [
src: "//",
type: "application/x-mpegurl" // sets type to MPEG-DASH


import * as THEOplayer from "../../../THEOplayer.js";

will make sure to get everything needed from our sdk.

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