Plyr - ein leichter moderner Videoplayer

Der Player arbeitet mit Standard HTML 5 Video und Audio Elementen zusammen. Die Bedienungselemente sind als SVG-Sprite vorhanden. Die einzelnen Elemente des Sprites sind im src Ordner zu finden.
Das Dateien für das Styling stehen im sass oder less Format zur Verfügung. Die JavaScript Optionen und die Api lässt sich einfach verstehen und handhaben.

Was ich besonders an Plyr schätze ist die einfache Verwendung ohne weitere Anpassung. YouTube, Vimeo und Responsive Darstellung out of the Box ;-) Das habe ich auf der Website der Capella de la Torre zuerst verwendet. Die auf dieser Seite benötigte Audio Playlist war mit einigen Zeile JavaScript recht zügig zu realisieren.

Die Video Abteilung hier im Blog habe ich dann auch gleich auf Plyr umgestellt.

$(function () {
	// Plyr setup
	var players = plyr.setup({
		enabled: true,
		debug: false,
		autoplay: false,
		loop: false,
		seekTime: 10,
		volume: 8,
		volumeMin: 0,
		volumeMax: 10,
		volumeStep: 1,
		duration: null,
		displayDuration: false,
		loadSprite: true,
		iconPrefix: 'plyr',
		//https://cdn.plyr.io/2.0.11/plyr.svg
		iconUrl: '/typo3conf/ext/tkmedia/Resources/Public/Icons/plyr.svg',
		clickToPlay: true,
		hideControls: true,
		showPosterOnEnd: false,
		disableContextMenu: true,
		keyboardShorcuts: {
			focused: true,
			global: false
		},
		tooltips: {
			controls: false,
			seek: true
		},
		captions: {
			defaultActive: false
		},
		fullscreen: {
			enabled: true,
			fallback: true,
			allowAudio: false
		},
		storage: {
			enabled: true,
			key: 'plyr'
		}
	});

	if (players.length > 0) {
		initPlayers(players);
	}

});

// Init multiple Players
function initPlayers(players) {
	var id = 1;
	players.forEach(function (player) {
		var container = player.getContainer();
		container.setAttribute('id', 'plyId-' + id);
		player.plyId = 'plyr-' + id;
		id++;

		player.on('play', function () {
			var currentPid = player.plyId;
			players.forEach(function (instance) {
				if (currentPid != instance.plyId) {
					instance.pause();
				}
			});
		});

	});
}