Question

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

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

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

我的问题。有没有人已经在离子应用程序中使用视频游戏并获得字幕工作？

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

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

在离子框架中具有字幕的视频玩家

1 个答案: