How to use Video.js with Ionic 2 + Angular 2

Question

Q) Can someone please give me a simple, working example of how to include video.js in a component/page in Ionic 2, preferably with a big play button centred?

Background:

I've been trying to get video.js working with my Ionic 2 app to render a list of videos, but I just can't figure it out.

My videos render when I have the markup:

<ion-row *ngFor="let item of videoList">
    <video id="my-player-{{item.id}}" class="video-js vjs-default-skin" 
        controls preload="auto" data-setup='{}'>
        <source src="{{item.previewVideoUrl}}" type="video/mp4">
    </video>
</ion-row>  

Chrome:

..but it's clearly just the browser's built in html5 player, not the video.js one as it's not rendering the same in chrome + safari like one would expect:

Safari:

Answer 1

Install the modules from npm i.e.

npm install video.js --save
npm install -s safe-json-parse

Then you can initialise the player in the component:

In the html:

<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto">
    <source [src]="url" type="video/mp4" />
</video>

Then in your code:

import videojs from 'video.js';

public url: string = "https://someurltovideo.com/wowsers/mp4"
...


initPlayer() {
    try {
        // setup the player via the unique element ID
        var element = document.getElementById('videoPlayer');
        if (element == null) {
            throw "error loading blah";
        }
        // if we get here, all good!
        videojs(element, {}, () => { });
    }
    catch (e) {
    }
}