le-player

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Home - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="Player.html">Player</a></li><li class="nav-item">F<a href="Player.html#.plugin">plugin</a></li><li class="nav-item">F<a href="Player.html#.preset">preset</a></li><li class="nav-item">F<a href="Player.html#changeQuality">changeQuality</a></li><li class="nav-item">F<a href="Player.html#createElement">createElement</a></li><li class="nav-item">F<a href="Player.html#exitFullscreen">exitFullscreen</a></li><li class="nav-item">F<a href="Player.html#getControls">getControls</a></li><li class="nav-item">F<a href="Player.html#getData">getData</a></li><li class="nav-item">F<a href="Player.html#getWidth">getWidth</a></li><li class="nav-item">F<a href="Player.html#load">load</a></li><li class="nav-item">F<a href="Player.html#onDelView">onDelView</a></li><li class="nav-item">F<a href="Player.html#onSetView">onSetView</a></li><li class="nav-item">F<a href="Player.html#pause">pause</a></li><li class="nav-item">F<a href="Player.html#play">play</a></li><li class="nav-item">F<a href="Player.html#requestFullscreen">requestFullscreen</a></li><li class="nav-item">F<a href="Player.html#toggleFullscreen">toggleFullscreen</a></li><li class="nav-item">F<a href="Player.html#togglePlay">togglePlay</a></li><li class="nav-heading">Events</li><li class="nav-heading">E<a href="Player.html#event:canplay">canplay</a></li><li class="nav-heading">E<a href="Player.html#event:canplaythrough">canplaythrough</a></li><li class="nav-heading">E<a href="Player.html#event:dbclick">dbclick</a></li><li class="nav-heading">E<a href="Player.html#event:durationchange">durationchange</a></li><li class="nav-heading">E<a href="Player.html#event:ended">ended</a></li><li class="nav-heading">E<a href="Player.html#event:error">error</a></li><li class="nav-heading">E<a href="Player.html#event:firstplay">firstplay</a></li><li class="nav-heading">E<a href="Player.html#event:fullscreenchange">fullscreenchange</a></li><li class="nav-heading">E<a href="Player.html#event:inited">inited</a></li><li class="nav-heading">E<a href="Player.html#event:loadstart">loadstart</a></li><li class="nav-heading">E<a href="Player.html#event:pause">pause</a></li><li class="nav-heading">E<a href="Player.html#event:play">play</a></li><li class="nav-heading">E<a href="Player.html#event:playing">playing</a></li><li class="nav-heading">E<a href="Player.html#event:progress">progress</a></li><li class="nav-heading">E<a href="Player.html#event:qualitychange">qualitychange</a></li><li class="nav-heading">E<a href="Player.html#event:rate">rate</a></li><li class="nav-heading">E<a href="Player.html#event:sectionsinit">sectionsinit</a></li><li class="nav-heading">E<a href="Player.html#event:seeked">seeked</a></li><li class="nav-heading">E<a href="Player.html#event:seeking">seeking</a></li><li class="nav-heading">E<a href="Player.html#event:timeupdate">timeupdate</a></li><li class="nav-heading">E<a href="Player.html#event:trackschange">trackschange</a></li><li class="nav-heading">E<a href="Player.html#event:useractive">useractive</a></li><li class="nav-heading">E<a href="Player.html#event:volumechange">volumechange</a></li><li class="nav-heading">E<a href="Player.html#event:waiting">waiting</a></li> </nav> <div id="main"> <section class="readme"> <article><h1>le-player</h1><blockquote> le-player - это веб плеер созданный для Лектория. Плеер поддерживает все фичи HTML5, так же, как YouTube и Vimeo. le-player использует jqeury. </blockquote> <a href="http://player.ciot-env.ru/docs/out/Player.html">Ссылка на документацию</a> (Work in progress) <a href="http://player.ciot-env.ru/demo/">Ссылка на пример</a> <h2>Быстрый старт</h2>Для начала нужно скачать плеер себе в проект. <pre class="prettyprint source"><code>npm install --save le-player</code></pre>или <pre class="prettyprint source"><code>bower install --save le-player</code></pre>Для работы с плеером достаточно подключить два файла в <code>head</code>, указать путь к svg иконкам плеера и убедиться что подключен jQuery. <pre class="prettyprint source lang-javascript"><code><link href="path/to/le-player.min.css" rel="stylesheet"> <script src="path/to/le-player.min.js"></script></code></pre>Теперь, если вы хотите использовать le-player, мы можете просто задать вашему элементу <code><video></code> какой-нибудь ID или класс и инилизировать его: HTML: <pre class="prettyprint source lang-HTML"><code><video id="video1" src="sample1.mp4"></video></code></pre>Так же для удобства можно задать options через атрибуты тэга video. HTML: <pre class="prettyprint source lang-HTML"><code><video id="video1" src="sample1.mp4" height="900" width="300" poster="./video.png" autoplay loop muted></video></code></pre>JS: <pre class="prettyprint source lang-javascript"><code>$('#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() {} };</code></pre></article> </section> </div> <footer> Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sat Aug 03 2019 16:05:24 GMT+0300 (MSK) using the Minami theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>