Videogular-Player with Subtitles in Ionic Framework

Question

I am working on my first hybrid-app in the Ionic-Framework and was in need of an good HTML5-Player.

I found http://www.videogular.com/ and so far it is really cool. Today I need to do some custom-stuff like "Icon-Change" etc.

Now I am hanging on adding "Subtitles" to the video. I already found this, but it does not work https://github.com/farhan-repo/videogular-subtitle-plugin

My Question. Does anybody out there already use the videogular-player in an ionic app and get subtitles work?

So far I cannot find any working example. Thank you in advance.

Answer 1

In fact you can use html5 tracks inside Videogular and it's pretty easy to do.

In your controller:

this.tracks = [
    {
        src: "assets/subs/pale-blue-dot.vtt",
        kind: "captions",
        srclang: "en",
        label: "English",
        default: "default"
    },
    {
        src: "assets/subs/pale-blue-dot-es.vtt",
        kind: "captions",
        srclang: "es",
        label: "Spanish",
        default: null
    }
]

this.changeTrack = function () {
    this.media[0].tracks[0].default = null;
    this.media[0].tracks[1].default = "default";
};

In your template:

<videogular>
    <vg-media vg-src="ctrl.sources"
              vg-tracks="ctrl.tracks"
              vg-native-controls="true">
    </vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
        <vg-scrub-bar>
            <vg-scrub-bar-buffer></vg-scrub-bar-buffer>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-playback-button></vg-playback-button>
        <vg-volume>
            <vg-mute-button></vg-mute-button>
            <vg-volume-bar></vg-volume-bar>
        </vg-volume>
        <vg-fullscreen-button></vg-fullscreen-button>
        <button ng-click="ctrl.changeTrack()">Change track</button>
    </vg-controls>
</videogular>

Demo: http://videogular.com/demo/#/ Code: https://github.com/2fdevs/videogular/tree/master/app