TypeError: this.player.sprites is not a function

I am trying to incorporate this sprite plugin from an example on Github, but my project says TypeError: this.player.sprites is not a function. The statement that throws that TypeError is on line 35. Can someone tell me how I'm supposed to define this as a function?

The player that the sprits function is supposed to be a part of is in the file videojs.ts. I also am confused what this file is doing.

Solution 1:

I tried the project that you have given. It builds without any error and upon loading in browser I see no issue(s) in console. so I suppose the error that is being referred is a runtime one. To be able to reproduce the error, I commented this line in video-player.component.ts and here we go, I can see the following error in the console...

core.js:5967 ERROR TypeError: this.player.sprites is not a function
    at VideoPlayerComponent.ngAfterViewInit (video-player.component.ts:35)
    at callHook (core.js:2486)
    at callHooks (core.js:2456)
    at executeInitAndCheckHooks (core.js:2408)
    at refreshView (core.js:9250)
    at refreshComponent (core.js:10345)
    at refreshChildComponents (core.js:8976)
    at refreshView (core.js:9229)
    at renderComponentOrTemplate (core.js:9293)
    at tickRootContext (core.js:10519)
defaultErrorLogger @ core.js:5967
handleError @ core.js:6015
(anonymous) @ core.js:29264
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:28209
tick @ core.js:29264
_loadComponent @ core.js:29290
bootstrap @ core.js:29229
(anonymous) @ core.js:28928
_moduleDoBootstrap @ core.js:28928
(anonymous) @ core.js:28898
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28281
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28269
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:28923
zUnb @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.js:11
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

I suppose that is the error being referred to.

So what is happening is , doing an import "./sprites-plugin"; executes following from ./sprites-plugin.ts...

import { videoJs } from '../videojs';
import { getSpritesComponent } from "./component";
import { SpritesPlugin } from "./plugin";

const registerSprites = () => {
    const SpritesComponent = getSpritesComponent();
    videoJs.registerComponent('SpritesComponent', SpritesComponent);
    videoJs.registerPlugin('sprites', SpritesPlugin);
};

registerSprites();

So most likely you too are missing a call to something as done by registerSprites() invocation. Try it out(do what is happening inside registerSprites) and let us know.

TypeError: this.player.sprites is not a function

Solution 1:

Related

Recent Posts