MOONy

✎ EDIT FILE

EDITING: demo.js

function getQueryStringValue (key) {
	return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

// borrowed from https://gist.github.com/niyazpk/f8ac616f181f6042d1e0
function updateUrlParameter (uri, key, value) {
	// remove the hash part before operating on the uri
	var
		i = uri.indexOf('#'),
		hash = i === -1 ? '' : uri.substr(i)
		;

uri = i === -1 ? uri : uri.substr(0, i);

var
		re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
		separator = uri.indexOf('?') !== -1 ? "&" : "?"
		;

if (!value) {
		// remove key-value pair if value is empty
		uri = uri.replace(new RegExp("([?&]?)" + key + "=[^&]*", "i"), '');

if (uri.slice(-1) === '?') {
			uri = uri.slice(0, -1);
		}
		// replace first occurrence of & by ? if no ? is present

if (uri.indexOf('?') === -1) {
			uri = uri.replace(/&/, '?');
		}

} else if (uri.match(re)) {
		uri = uri.replace(re, '$1' + key + "=" + value + '$2');
	} else {
		uri = uri + separator + key + "=" + value;
	}
	return uri + hash;
}

var
	lang = getQueryStringValue('lang') || 'en',
	stretching = getQueryStringValue('stretching') || 'auto',
	languageSelector = document.querySelector('select[name=lang]'),
	stretchingSelector = document.querySelector('select[name=stretching]'),
	sourcesSelector = document.querySelectorAll('select[name=sources]'),
	sourcesTotal = sourcesSelector.length
;

languageSelector.value = lang;
languageSelector.addEventListener('change', function () {
	window.location.href = updateUrlParameter(window.location.href, 'lang', languageSelector.value);
});
stretchingSelector.value = stretching;
stretchingSelector.addEventListener('change', function () {
	window.location.href = updateUrlParameter(window.location.href, 'stretching', stretchingSelector.value);
});

for (var i = 0; i < sourcesTotal; i++) {
	sourcesSelector[i].addEventListener('change', function () {

var
			media = this.closest('.players').querySelector('.mejs__container').id,
			player = mejs.players[media]
		;

player.setSrc(this.value.replace('&amp;', '&'));
		player.load();
		if (!mejs.Features.isiOS && !mejs.Features.isAndroid) {
			player.play();
		}

var renderer = document.getElementById(player.media.id + '-rendername');
		renderer.querySelector('.src').innerHTML = '<a href="' + this.value + '" target="_blank">' + this.value + '</a>';
		renderer.querySelector('.renderer').innerHTML = player.media.rendererName;
		renderer.querySelector('.error').innerHTML = '';

});

// These media types cannot play at all on iOS, so disabling them
	if (mejs.Features.isiOS) {
		sourcesSelector[i].querySelector('option[value^="rtmp"]').disabled = true;
		if (sourcesSelector[i].querySelector('option[value$="webm"]')) {
			sourcesSelector[i].querySelector('option[value$="webm"]').disabled = true;
		}
		if (sourcesSelector[i].querySelector('option[value$=".mpd"]')) {
			sourcesSelector[i].querySelector('option[value$=".mpd"]').disabled = true;
		}
		if (sourcesSelector[i].querySelector('option[value$=".ogg"]')) {
			sourcesSelector[i].querySelector('option[value$=".ogg"]').disabled = true;
		}
	}
}

document.addEventListener('DOMContentLoaded', function () {

mejs.i18n.language(lang);

var mediaElements = document.querySelectorAll('video, audio'), i, total = mediaElements.length;

for (i = 0; i < total; i++) {
		new MediaElementPlayer(mediaElements[i], {
			stretching: stretching,
			success: function (media) {
				var renderer = document.getElementById(media.id + '-rendername');

media.addEventListener('loadedmetadata', function () {
					var src = media.originalNode.getAttribute('src').replace('&amp;', '&');
					if (src !== null && src !== undefined) {
						renderer.querySelector('.src').innerHTML = '<a href="' + src + '" target="_blank">' + src + '</a>';
						renderer.querySelector('.renderer').innerHTML = media.rendererName;
						renderer.querySelector('.error').innerHTML = '';
					}
				});

media.addEventListener('error', function (e) {
					renderer.querySelector('.error').innerHTML = '<strong>Error</strong>: ' + e.message;
				});
			}
		});
	}
});

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📁 lang/	DIR	—	2025-11-12 11:40
📁 renderers/	DIR	—	2025-11-12 11:40
📄 demo.js	JS	4.1 KB	2026-04-27 15:56	EDIT
📄 demo.min.js	JS	3.3 KB	2026-04-27 15:56	EDIT
📄 english.vtt	VTT	445 B	2026-04-27 15:56	EDIT
📄 english_chapters.vtt	VTT	222 B	2026-04-27 15:56	EDIT
📄 favicon.ico	ICO	1.1 KB	2026-04-27 15:56	EDIT
📄 german.vtt	VTT	567 B	2026-04-27 15:56	EDIT
📄 german_chapters.vtt	VTT	214 B	2026-04-27 15:56	EDIT
📄 mediaelement-and-player.js	JS	246.4 KB	2026-04-27 15:56	EDIT
📄 mediaelement-and-player.min.js	JS	144.6 KB	2026-04-27 15:56	EDIT
📄 mediaelement-flash-audio-ogg.swf	SWF	296.6 KB	2025-11-12 11:30	EDIT
📄 mediaelement-flash-audio.swf	SWF	4.2 KB	2025-11-12 11:30	EDIT
📄 mediaelement-flash-video-hls.swf	SWF	90.6 KB	2025-11-12 11:30	EDIT
📄 mediaelement-flash-video-mdash.swf	SWF	392 KB	2025-11-12 11:30	EDIT
📄 mediaelement-flash-video.swf	SWF	8.1 KB	2025-11-12 11:30	EDIT
📄 mediaelement.js	JS	105.2 KB	2026-04-27 15:56	EDIT
📄 mediaelement.min.js	JS	57.1 KB	2026-04-27 15:56	EDIT
📄 mediaelementplayer-legacy.css	CSS	16.7 KB	2026-04-27 15:56	EDIT
📄 mediaelementplayer-legacy.min.css	CSS	11.8 KB	2026-04-27 15:56	EDIT
📄 mediaelementplayer.css	CSS	16.9 KB	2026-04-27 15:56	EDIT
📄 mediaelementplayer.min.css	CSS	12 KB	2026-04-27 15:56	EDIT
📄 mejs-controls.png	PNG	2.8 KB	2025-11-12 11:30	EDIT
📄 mejs-controls.svg	SVG	5.4 KB	2026-04-27 15:56	EDIT
📄 package.js	JS	1.5 KB	2026-04-27 15:56	EDIT
📄 package.json	JSON	2.2 KB	2026-04-27 15:56	EDIT