Using locomote javascript video player in ionic2

Ionic Framework ionic-v3
1

We try to integrate locomte video player which has a npm package, so we install the package with
npm install locmote-video-player --save

After that we try to import it like that

import { Locomote } from 'locomote-video-player';

export class TestComponent {

    constructor() {
        new Locomote('blabla', 'Player.swf');
   }
}

But doing so, we get the error Locomote is not a constructur. Honestly we are not an expert to include plane javascript libraries from npm package into ionic2 with typescript2.0. So we think the problem should about there?
Somehelp?

2

I haven’t worked with or used the Locomote video player package so I don’t know how to load/play videos using that in Ionic 2 but I know the following will overcome the errors you are experiencing.

Following assumes you are coding in your home component. If not change file references to where you are coding this functionality.

In your home.ts file, add the following:

  • Include ElementRef and ViewChild classes

  • Import Locomote module

  • Use ViewChild to access template reference variable in DOM element where player is located in your home.html file

  • Assign Locomote constructor to property

  • Place the Player.swf file in the following location: src/assets/swfs (you will need to create the SWF’s directory)

All these are highlighted in bold in home.ts file below:

import { ElementRef, Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import Locomote from ‘locomote-video-player’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
@ViewChild(‘player’) player : ElementRef;

constructor(public navCtrl: NavController) {
let player = new Locomote(this.player, ‘/assets/swfs/Player.swf’);
}

}

In your home.html template add a #player template reference variable to a DOM element:

<div id=“player” #player></div>

This template reference variable allows the component class to reference the DOM element where you want the Locomote video player functionality to work.

That’s as much as I can help with I’m afraid unless anyone else has an input??

Hope this helps.

3

Hi and thx,

I know this but the problem is callilng new Locomote I get the error there is now constructor. So I’m not sure what is the problem about that.

4

I don’t get the constructor error with the above code.

Change how you import the module and how you assign a constructor to the object (as shown in the example I provided above) that should solve it.

5

What do you intend with “change how you import the module”??
Do you mean declaring the import without {} ??