Subtitle plugin for videogular HTML5 video player
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
css
LICENSE
README.md
text-track.js

README.md

Videogular Subtitle Plugin

Subtitle plugin for videogular HTML5 video player

You could see videogular project here: http://www.videogular.com

Documentation

To use this plugin inject this module to you angular project and add subtitle object on config var.

'use strict';
angular.module('myApp',
  [
    "com.2fdevs.videogular",
		"com.2fdevs.videogular.plugins.controls",
		"com.2fdevs.videogular.plugins.overlayplay",
		"com.2fdevs.videogular.plugins.buffering",
		"com.2fdevs.videogular.plugins.poster",
		"videogular.plugins.texttrack"
	]
)
.controller('MainCtrl', function ($scope, $sce) {
  $scope.config = {
    sources: [
      {src: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
      {src: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
      {src: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
    ],
    theme: {
      url: "styles/themes/default/videogular.css"
    },
    plugins: {
			poster: {
				url: "assets/images/videogular.png"
			},
		  subtitle: [{
        kind: "captions",
			  src: $sce.trustAsResourceUrl("assets/subs/pale-blue-dot.vtt"),
			  srclang: "en",
			  label: "English"
      }]
    }
  };
});

Then add <track> tag inside video tag and add <vg-text> directive inside <vg-controls>

<videogular vg-theme="config.theme">
    <vg-video vg-src="config.sources">
        <track></track> <!-- add html5 text track tag -->
    </vg-video>
    <vg-controls vg-autohide="config.autoHide" style="height: 50px;">
        <vg-play-pause-button></vg-play-pause-button>
        <vg-timeDisplay>{{ API.currentTime | date:'mm:ss' }}</vg-timeDisplay>
        <vg-scrubBar>
            <vg-scrubbarcurrenttime></vg-scrubbarcurrenttime>
        </vg-scrubBar>
        <vg-timeDisplay>{{ API.totalTime | date:'mm:ss' }}</vg-timeDisplay>
        <vg-volume>
            <vg-mutebutton></vg-mutebutton>
            <vg-volumebar></vg-volumebar>
        </vg-volume>
        <vg-text vg-text-src="config.plugins.subtitle"></vg-text> <!-- vg-text directive with subtile config var -->
        <vg-fullscreenButton></vg-fullscreenButton>
    </vg-controls>
</videogular>

Another thing you might add css style for subtitle controls

License

MIT License