Auto-Translation of <track> elements

What It Does

Loads subtitles from a <track> element, then sends them to Google Translate to be translated into languages you specify. It also allows the user to choose additional languages. Thanks to Playr for the original SRT parsing code.

Setup

1

Video with <track> element

Be sure to set the srclang attribute

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
	<!-- MP4 file (you can also add WebM and Ogg if needed -->
	<source type="video/mp4" src="myvideo.mp4" />
	<!-- Optional: Add subtitles for each language -->
	<track kind="subtitles" src="subtitles.srt" srclang="en" />
</video>
2

Add Script and Styles

Add the normal JavaScript and stylesheet

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<!-- translation is built is, so no additional plugins are needed -->
3

Choose Options

Captions are automatically added, but you can control where they appear on the control bar with the 'track' option, and you can also set a default langauge 

jQuery(document).ready(function($) {

	$('audio,video').mediaelementplayer({
		// automatically create these translations on load
		translations:['es','ar','yi','zh-cn'],
		// allow the user to add additional translations
		translationSelector: true,
		// start with English automatically turned on
		startLanguage: 'en'
	});

});