0

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

我找到了http://www.videogular.com/到目前为止它真的很酷。今天我需要做一些自定义的东西，比如“图标更改”等。

现在我正在为视频添加“字幕”。我已经找到了这个，但它不起作用https://github.com/farhan-repo/videogular-subtitle-plugin

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

到目前为止，我找不到任何工作示例。先感谢您。

4

1 回答 1

3

事实上，您可以在 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

于 2015-10-21T14:47:52.300 回答