The best player made for Lectoriy!
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
docs
source
.editorconfig
.eslintrc.json
.gitignore
.htaccess
.npmignore
.tern-project
LICENSE
README.md
bower.json
gruntfile.js
package.json
webpack.config.js

README.md

le-player

le-player - это веб плеер созданный для Лектория. Плеер поддерживает все фичи HTML5, так же, как YouTube и Vimeo. le-player использует jqeury.

Ссылка на документацию (Work in progress)

Ссылка на пример

Быстрый старт

Для начала нужно скачать плеер себе в проект.

npm install --save le-player

или

bower install --save le-player

Для работы с плеером достаточно подключить два файла в head, указать путь к svg иконкам плеера и убедиться что подключен jQuery.

<link href="path/to/le-player.min.css" rel="stylesheet">
<script src="path/to/le-player.min.js"></script>

Теперь, если вы хотите использовать le-player, мы можете просто задать вашему элементу <video> какой-нибудь ID или класс и инилизировать его:

HTML:

<video id="video1" src="sample1.mp4"></video>

Так же для удобства можно задать options через атрибуты тэга video.

HTML:

<video id="video1" src="sample1.mp4" height="900" width="300" poster="./video.png" autoplay loop muted></video>

JS:

$('#video1').lePlayer({
	/** настройки, которые переопределяют дефолтные настройки */
});

// или

const player = new lePlayer($('#video1'), { //..options });


// Дефолтные настройки
const defaultOptions = {
	autoplay : false,
	height : 'auto',
	loop : false,
	muted : false,
	preload : 'metadata',
	poster : null,
	svgPath : '../dist/svg/svg-defs.svg',
	innactivityTimeout : 10000,
	fullscreen : {
		hideTimelineTime : 10000
	},
	rate : {
		step : 0.25,
		min : 0.5,
		max : 4.0,
		'default' : 1
	},
	playback : {
		step : {
			short : 5,
			medium : 10,
			long : 30
		}
	},
	controls : {
		common : [
			[ 'play', 'volume', 'divider', 'timeline',  'divider', 'section', 'divider', 'fullscreen' ],
			[ 'rate', 'divider', 'backward', 'divider', 'source', 'divider', 'subtitle', 'divider', 'download', 'divider', 'kebinding info' ]
		],
		fullscreen : [
			[ 'play', 'volume', 'divider', 'timeline', 'divider', 'rate', 'divider', 'kebinding info',  'divider', 'backward', 'divider', 'source', 'divider', 'subtitle', 'divider', 'download', 'divider', 'section', 'divider', 'fullscreen' ]
		],
		mini : [
			[ 'play', 'volume', 'divider', 'fullscreen', 'divider', 'timeinfo']
		]
	},
	volume : {
		default : 0.4,
		mutelimit : 0.05,
		step : 0.1
	},
	keyBinding : [
		{
			key : 32,
			info : ['Space'],
			description : 'Начать проигрывание / поставить на паузу',
			fn : (player) => {
				player.video.togglePlay();
			}
		},
		{
			key : 37,
			info : [''],
			description : `Перемотать на 10 секунд назад`,
			fn : (player) => {
				player.video.currentTime -= player.options.playback.step.medium;
			}
		},
		{
			key : 39,
			info : [''],
			description : `Перемотать на 10 секунд вперёд`,
			fn : (player) => {
				player.video.currentTime += player.options.playback.step.medium;
			}
		},
		{
			shiftKey : true,
			info : ['Shift', ''],
			description : 'Перейти на предыдущую секцию',
			key : 37,
			fn : (player) => {
				if(player.sections == null) {
					return;
				}
				player.sections.prev();

			}
		},
		{
			shiftKey : true,
			key : 39,
			info : ['Shift', ''],
			description : 'Перейти на следующую секцию',
			fn : (player) => {
				if(player.sections == null) {
					return;
				}
				player.sections.next()
			}
		},
		{
			key : 38,
			info : [''],
			description : 'Увеличить громкость',
			fn : (player) => {
				player.video.volume += player.options.volume.step;
			}
		},

		{
			key : 40,
			info : [''],
			description : 'Уменьшить громкость',
			fn : (player) => {
				player.video.volume -= player.options.volume.step;
			}
		},

		{
			key : 70,
			info : ['f'],
			description : 'Открыть/закрыть полноэкраный режим',
			fn : (player) => {
				player.toggleFullscreen();
			}
		}
	],
	miniplayer : {
		width: '100%',
		offsetShow : (player) => {
			const offset = player.element.offset().top + player.element.outerHeight() - player.getControls('common').element.height();

			return offset;
		}
	},
	onPlayerInited : function() {}
};