Video.js, TypeScript, traditional Ember Component

caller.hbs

<MyVideo @video={{someVideoModelInstance}}/>

my-video.hbs

<video class="video-js vjs-big-play-centered"></video>

my-video.ts

import Component from "@ember/component";
import { assert } from "@ember/debug";
import { isNone } from "@ember/utils";
import ModelRegistry from "ember-data/types/registries/model";
import videojs, { VideoJsPlayer } from "video.js";

export default class MyVideoComponent extends Component {
  player?: VideoJsPlayer;

  video!: ModelRegistry["video"];

  didInsertElement() {
    super.didInsertElement();
    this.player = videojs(this.element.querySelector(".video-js"), { controls: true, fluid: true });
    this.player.on("play", () => {
      console.log("playing...");
    });
  }

  didRender() {
    if (!this.player || !this.video.mediaPath || this.video.mediaPath === this.player.src()) {
      return;
    }
    this.player.src(this.video.mediaPath);
  }

  init() {
    super.init();
    assert("`video` is required", !isNone(this.video));
  }

  willDestroyElement() {
    super.willDestroyElement();
    if (this.player) {
      this.player.dispose();
    }
  }
}