带有 Ionic Framework 字幕的 Videogular-Player

Question

我正在 Ionic-Framework 中开发我的第一个混合应用程序，需要一个好的 HTML5-Player。

我找到了 http://www.videogular.com/，到目前为止它真的很棒。今天我需要做一些自定义的事情，比如 "Icon-Change" 等

现在我正在等待将 "Subtitles" 添加到视频中。我已经找到了这个，但它不起作用 https://github.com/farhan-repo/videogular-subtitle-plugin

我的问题。有没有人已经在 ionic 应用程序中使用了 videogular-player 并获得了字幕？

到目前为止我找不到任何有效的例子。先感谢您。

Answer 1

事实上，您可以在 Videogular 中使用 html5 个音轨，这很容易做到。

在你的控制器中：

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

带有 Ionic Framework 字幕的 Videogular-Player

Videogular-Player with Subtitles in Ionic Framework

html

angularjs

videogular

ionic