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() {}
};