THEOPlayer video player

Hi all,

I am looking to embed THEOPlayer video player in an Aurelia application: -

HTML5, Vue & React examples here

These examples seem fairly straightforward - however, the Player needs to be instantiated from a CDN host for licensing reasons (i.e. self hosting the player, perhaps installed via npm/yarn is not an option). So in Vue the component initialised like this typically:

   playerInit() {
      const player = new window.THEOplayer.Player(this.$refs.theoplayer, {
        fluid: true,
        libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/"
      });
      player.source = {
        sources: this.source
      };

or in HTML5 :

      var element = document.querySelector(".theoplayer-container");
      var player = new THEOplayer.Player(element, {
        // ***** REPLACE THEOPLAYER LOCATION *****
        libraryLocation:
          "https://cdn.myth.theoplayer.com/7aff3fa6-f92e-45f9-a40e-1bce9911b073",
        // *****
        ui: {
          width: "570px",
          height: "320px"
        }
      });

The above from here

Putting something like this into a script tag in a view is not an option as it is never loaded.

Is there a way, in a ViewModel, of importing and instantiating an object defined in a library hosted on a CDN?

Any help/workarounds appreciated.

Regards
Eamonn

1 Like

Is there a way, in a ViewModel, of importing and instantiating an object defined in a library hosted on a CDN?

Yes, i can create an example for this. Though if your main objective is to have THEOplayer working in your app, wouldn’t it be as their doc:

  • add script tag pointing to THEOPlayer js
  • instantiating with proper library location on a cdn/locally?

Or can you help elaborate a bit what the step that is confusing?

1 Like

Thanks for the interest!

I guess I am struggling with the viewModel syntax to import an type/object from a CDN hosted library, bind this to a html element, and then proceed to configure the player in the viewModel?

This seems to be the gist of the Vue example - but I am seeking to replicate this in Aurelia?

Thanks again

1 Like

I think it would be something like this https://gist.dumber.app/?gist=3fb4709ec631ca5b4f6db752a150dce3

Though i was unable to see anything in the player, probably because the way it’s run in an inframe, can you try that locally?

Edit: it’s working, though it seems you have to make the player on a <div/> element. Weird but fine i guess

1 Like

Thanks!

I can see it working on the gist – but am struggling to incorporate into ts/webpack project, getting:

“aurelia-loader-webpack.js?e63c:197 Uncaught (in promise) Error: Unable to find module with ID: heoplayer”

from the console log when I bring over your example. Possibly something here in main I am not doing correctly?:

import { Aurelia } from "aurelia-framework";
import * as environment from "../config/environment.json";
import { PLATFORM } from "aurelia-pal";

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .globalResources("theoplayer")
    .feature(PLATFORM.moduleName("resources/index"));

  aurelia.use.developmentLogging(environment.debug ? "debug" : "warn");

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName("aurelia-testing"));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}

Also, I suspect the script tag in index:

  <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>

will need to incorporate the id somehow - still working on this.

Thanks Again

1 Like

You need to wrap the globalresource string just like the feature one with PLATFORM.moduleName.

It’s a limitation with Webpack and Aurelia v1, which will be obsolete in v2

2 Likes

Thanks - I was trying this -

  aurelia.use
    .standardConfiguration()
    .globalResources(PLATFORM.moduleName("theoplayer"))
    .feature(PLATFORM.moduleName("resources/index"))

But it leads to this:

ERROR in ./src/theoplayer.js 3:0
Module parse failed: Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { inject, inlineView, bindable } from "aurelia-framework";
| 
> @inlineView(
|   '<template><div ref=playerEl class="theoplayer-container video-js theoplayer-skin vjs-16-9 THEOplayer">'
| )
 @ ./src/main.ts
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

Some issue here perhaps?

import { inject, inlineView, bindable } from "aurelia-framework";

@inlineView(
  '<template><div ref=playerEl class="theoplayer-container video-js theoplayer-skin vjs-16-9 THEOplayer">'
)
@inject(Element)
export class TheoPlayer {
  @bindable
  source;

  constructor(el) {}

  init() {
    this.player = new THEOplayer.Player(this.playerEl, {
      fluid: true,
      libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/",
    });
  }

  bind() {
    this.init();
    this.player.source = {
      sources: this.source,
    };
  }
}
1 Like

Hmm that’s weird. it shouldn’t happen. Maybe rerun your webpack dev process?

Edit: or are you using TypeScript and referencing a JS file and thus, no loader pipeline kicks in?

thanks - it could in fact be the latter: referencing a js component. I was having challenges converting to typescript: Something like this:

import { inject, inlineView, bindable } from "aurelia-framework";

@inlineView(
  '<template><div ref=playerEl class="theoplayer-container video-js theoplayer-skin vjs-16-9 THEOplayer">'
)
@inject(Element)
export class TheoPlayer {
  @bindable
  source;

  player: any;
  playerEl: any;

  constructor(el) {}

  init() {
    this.player = new THEOplayer.Player(this.playerEl, {
      fluid: true,
      libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/",
    });
  }

  bind() {
    this.init();
    this.player.source = {
      sources: this.source,
    };
  }
}

However, instantiating the THEOPlayer will struggle without some sort of import?

1 Like

It looks like you gotta build the typing yourself. So probably do this

declare global {
  const THEOplayer: any;
}

and incrementally enhance the typing for that any?

1 Like

Yes - working perfectly now in TS + Webpack.
Thank you very much

2 Likes

Glad you got it working, it maybe worth it to help other folks with the typings you produce overtime working with THEOplayer.

1 Like

Good idea - hoping to build the player into this aurelia app(and others) eventually:

3 Likes