Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/mediaelementplayer-i18n.html

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/5c4762f8a8827cffe207 to your computer and use it in GitHub Desktop.
Save nfreear/5c4762f8a8827cffe207 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of MediaElement.js player internationalization/ localization | i18n | https://github.com/johndyer/mediaelement/issues/1263
Raw
mediaelementplayer-i18n.html
<!doctype html><meta charset="utf-8"><title>*MediaElement - i18n</title>
<base data-EDIT_ME_href="http://localhost:8888/ ..." />
<script src="../build/jquery.js"></script>
<script id="mejs-i18n-init-js">
var mejs = mejs || {};
(function () {
var language = param_lang();
mejs.i18n = {
locale: {
language: language,
strings: { }
}
};
if (language) {
// Insert the translation JS after this one, before the main "mediaelement...js"
$("#mejs-i18n-init-js").after(
"<script src='../src/js/me-i18n-locale-" + language.toLowerCase() + ".js'></sc" + "ript>"
);
}
function param_lang() {
// RFC 5646: https://tools.ietf.org/html/rfc5646
// Examples: en, zh-CN, zh-Hans-CN, sr-Latn-RS, es-419, x-private
var ietf_lang_re = /^(x\-)?[a-z]{2,}(\-\w{2,})?(\-\w{2,})?$/,
lang = _param("lang").match(ietf_lang_re);
return lang && lang[0];
}
function _param(key, _default) {
_default = _default || "";
var re = new RegExp("[&?]" + key + "=([^&]+)"),
value = re.exec(window.location.search);
return value ? value[1] : _default;
}
})();
function log(s) {
window.console && console.log(arguments.length > 1 ? arguments : s);
}
</script>
<script>
log(">>i18n (1)", mejs.i18n);
</script>
<script src="../local-build/mediaelement-and-player.min.js"></script>
<script src="../demo/testforfiles.js"></script>
<link rel=stylesheet href="../local-build/mediaelementplayer.min.css" />
<style>
body { font: 1em sans-serif; background: #fcfcfc; }
select, input { font-size: 1.1em; padding: 8px; x-min-height: 2em; x-min-width: 10em; }
</style>
<h1>MediaElement.js - internationalization</h1>
<form>
<p><label>Language <select name="lang">
<option value="en" selected >English</option>
<option value="de">Deutsch/ German (de)</option>
<option value="fr">Français/ French (fr)</option>
<option value="zh-CN">简体中文 / Simplified Chinese (zh-CN)</option>
<option value="zh">繁體中文/ Traditional Chinese (zh-TW)</option>
</select></label>
<input type="submit" />
</form>
<video width="640" height="360"
id="player1" poster="../media/echo-hereweare.jpg"
controls="controls" preload="none">
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="../media/echo-hereweare.mp4" />
<!-- WebM for Firefox 4 and Opera -->
<source type="video/webm" src="../media/echo-hereweare.webm" />
</video>
<p><span id="player1-mode"></span>
<code><pre>
&lt;video width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"
id="player1" poster="../media/echo-hereweare.jpg"
controls="controls" preload="none"&gt;&lt;/video&gt;
</pre></code>
<script>
$('audio,video').mediaelementplayer({
alwaysShowControls: true,
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
$(player).closest(".mejs-container").attr("lang", mejs.i18n.getLanguage());
$("html").attr("lang", mejs.i18n.getLanguage());
log(player, mejs);
}
});
// Too late!
log(">>i18n (2)", mejs.i18n.getLanguage(), mejs.i18n);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment