Videogular-Player с субтитрами в Ionic Framework

Question

Я работаю над своим первым гибридным приложением в Ionic-Framework и нуждаюсь в хорошем HTML5-плеере.

Я нашел http://www.videogular.com/ и до сих пор это действительно круто. Сегодня мне нужно сделать несколько пользовательских вещей, таких как "Смена иконы" и т. Д.

Теперь я вешаю на добавление "Субтитры" к видео. Я уже нашел это, но это не работает https://github.com/farhan-repo/videogular-subtitle-plugin

Мой вопрос. Кто-нибудь там уже использует видеогенератор в ионном приложении и заставляет работать субтитры?

Пока я не могу найти ни одного рабочего примера. Заранее спасибо.

Answer 1

На самом деле вы можете использовать html5 треки внутри Videogular, и это довольно легко сделать.

В вашем контроллере:

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";
};

В вашем шаблоне:

<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>

Демо: http://videogular.com/demo/ Код: https://github.com/2fdevs/videogular/tree/master/app