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'
	});

});
function write_example($name) { switch ($name) { case '100': ?>

100% Mode

What It Does

You can now set the video to 100% height and width and it will expand with the window. You can also use this in embedded iframes.

Setup

1

Add Scripts

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
2

Set the video height and width to 100%

<video width="100%" height="100%" src="mymedia.mp4"></video>
jQuery(document).ready(function($) {

	// create player
	$('#player1').mediaelementplayer();

});