Skip to content

Instantly share code, notes, and snippets.

@nbibler
Created November 5, 2020 17:15
Show Gist options
  • Save nbibler/eabe2575938343bfd76577399686094f to your computer and use it in GitHub Desktop.
Save nbibler/eabe2575938343bfd76577399686094f to your computer and use it in GitHub Desktop.
Video.js, TypeScript, traditional Ember Component
<MyVideo @video={{someVideoModelInstance}}/>
<video class="video-js vjs-big-play-centered"></video>
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();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment