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