Уявіть: студент на слабкому інтернеті намагається додивитися відеоурок, але плеєр гальмує, а після перемотування прогрес обнуляється — доводиться передивлятися заново. Саме з такими проблемами стикаються багато LMS, зібрані без продуманої архітектури. Розробка системи уроків — це комплексне завдання: потрібно забезпечити стабільний трекінг для відео, тексту та аудіо, адаптивну доставку контенту та відмовостійкість. Ми розробляємо систему уроків, де кожен тип контенту має надійний трекінг та адаптивну доставку. На основі досвіду 50+ навчальних порталів ми виділили ключові технічні проблеми: крихкий трекінг при перемотуванні відео, довге завантаження великих файлів, відсутність синхронізації аудіо з транскрипцією. Нижче — як ми їх вирішуємо.
Які технічні проблеми вирішує система уроків?
Трекінг прогресу відео — користувач може мотати назад, і прогрес має фіксувати лише максимальну позицію. Ми зберігаємо її кожні 10% і завершуємо урок при 90%+ перегляду, а не тільки при закінченні.
Транскодування великих файлів — прямий MP4 гальмує на повільному інтернеті. Ми переганяємо відео в HLS з декількома бітрейтами (360p–1080p) і використовуємо фонові воркери (Bull) для асинхронної обробки.
Текстові уроки без позначки про прочитання — просто пролистати до кінця недостатньо. Ми використовуємо Intersection Observer для детекції 90% прокрутки та автоматично завершуємо урок.
Аудіо без синхронізації — слухач втрачає нитку без тексту. Ми виводимо транскрипцію поруч із плеєром і підсвічуємо поточне слово (опціонально).
Розробка системи уроків: як забезпечити надійний трекінг прогресу?
Ключова складність — користувач може перемотувати назад, але прогрес має тільки зростати. У компоненті ReactPlayer ми запам'ятовуємо максимальне значення played (0–1) і зберігаємо його кожні 10%.
import ReactPlayer from 'react-player'; import { useState, useRef, useCallback } from 'react'; function VideoLesson({ lesson, enrollmentId, onComplete }) { const playerRef = useRef<ReactPlayer>(null); const [played, setPlayed] = useState(0); const [completed, setCompleted] = useState(lesson.progress?.completed ?? false); const maxPlayedRef = useRef(lesson.progress?.progress ?? 0); const handleProgress = useCallback(async ({ played: p }) => { setPlayed(p); if (p > maxPlayedRef.current) { maxPlayedRef.current = p; if (Math.floor(p * 10) > Math.floor((p - 0.01) * 10)) { await saveProgress(enrollmentId, lesson.id, p); } } }, []); const handleEnded = useCallback(async () => { if (!completed) { setCompleted(true); await fetch(`/api/enrollments/${enrollmentId}/lessons/${lesson.id}/complete`, { method: 'POST', }); onComplete?.(lesson.id); } }, [completed]); const handleProgress2 = useCallback(({ played: p }) => { handleProgress({ played: p }); if (p >= 0.9 && !completed) { handleEnded(); } }, [handleProgress, handleEnded, completed]); return ( <div className="space-y-4"> <div className="relative aspect-video bg-black rounded-xl overflow-hidden"> <ReactPlayer ref={playerRef} url={lesson.content.videoUrl} width="100%" height="100%" controls onProgress={handleProgress2} onEnded={handleEnded} config={{ file: { tracks: lesson.content.subtitles.map(s => ({ kind: 'subtitles', src: s.url, srcLang: s.lang, label: s.label, })), }, }} /> </div> {lesson.content.chapters?.length > 0 && ( <div> <h3 className="font-semibold text-gray-800 mb-2">Содержание</h3> <ul className="space-y-1"> {lesson.content.chapters.map((ch, i) => ( <li key={i}> <button onClick={() => playerRef.current?.seekTo(ch.time)} className="text-sm text-blue-600 hover:underline" > {formatTime(ch.time)} — {ch.title} </button> </li> ))} </ul> </div> )} {completed && ( <div className="flex items-center gap-2 text-green-600 text-sm"> <span>✓</span> Урок завершён </div> )} </div> ); } Чому ми використовуємо HLS замість прямого MP4?
Прямий MP4 завантажується цілком — при поганому з'єднанні користувач чекає хвилини. HLS ріже відео на 6-секундні сегменти: плеєр починає показ одразу, перемикаючи якість залежно від швидкості. HLS починає відтворення в 3-10 разів швидше MP4, а в умовах слабкого інтернету різниця сягає 15 разів. Ми транскодуємо завантажене відео через ffmpeg у фоні.
Стандарт HTTP Live Streaming описує адаптивну передачу відео та забезпечує плавне відтворення.
import { createReadStream } from 'fs'; import ffmpeg from 'fluent-ffmpeg'; async function transcodeToHLS(inputPath: string, outputDir: string): Promise<string> { await fs.promises.mkdir(outputDir, { recursive: true }); return new Promise((resolve, reject) => { ffmpeg(inputPath) .outputOptions([ '-profile:v baseline', '-level 3.0', '-start_number 0', '-hls_time 6', '-hls_list_size 0', '-f hls', ]) .output(path.join(outputDir, 'index.m3u8')) .outputOptions([ '-vf scale=-2:720', '-b:v 2500k', ]) .on('end', () => resolve(`${outputDir}/index.m3u8`)) .on('error', reject) .run(); }); } videoProcessingQueue.process(async (job) => { const { uploadedPath, lessonId } = job.data; const outputDir = `storage/lessons/${lessonId}/hls`; await job.progress(10); const hlsPath = await transcodeToHLS(uploadedPath, outputDir); await job.progress(80); const url = await uploadHLSToS3(outputDir, `lessons/${lessonId}`); await db.lessons.update(lessonId, { content: { videoUrl: url, status: 'ready' } }); await job.progress(100); }); Докладніше про фонове транскодування
Ми використовуємо чергу Bull для асинхронної обробки відео. Після завантаження файлу на сервер завдання потрапляє в чергу, і робочий процес транскодує відео в HLS через ffmpeg. Це не блокує основний потік і дозволяє масштабувати обробку на кілька воркерів. Час транскодування залежить від розміру відео: 10-хвилинний ролик у 1080p обробляється близько 5 хвилин.Текстові та аудіоуроки
Як працює Intersection Observer для фіксації прочитання?
Для текстових уроків використовуємо редактор Tiptap (на базі ProseMirror). Контент зберігається в HTML або Markdown. Щоб зарахувати прочитання, відстежуємо прокрутку до кінця через Intersection Observer.
import { useEditor, EditorContent } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; import Image from '@tiptap/extension-image'; import { Youtube } from '@tiptap/extension-youtube'; function TextLessonViewer({ content, onComplete }) { const editor = useEditor({ content: content.body, editable: false, extensions: [StarterKit, Image, Youtube], }); const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) onComplete?.(); }, { threshold: 0.9 } ); const marker = containerRef.current?.querySelector('.lesson-end-marker'); if (marker) observer.observe(marker); return () => observer.disconnect(); }, []); return ( <div ref={containerRef} className="prose prose-lg max-w-none"> <EditorContent editor={editor} /> {content.attachments?.length > 0 && ( <div className="mt-8 border-t pt-6"> <h3 className="font-semibold">Матеріали уроку</h3> <ul className="space-y-2 mt-3"> {content.attachments.map(att => ( <li key={att.url}> <a href={att.url} download className="flex items-center gap-2 text-blue-600 hover:underline"> <span>📎</span> <span>{att.name}</span> <span className="text-gray-400 text-sm">({formatFileSize(att.size)})</span> </a> </li> ))} </ul> </div> )} <div className="lesson-end-marker h-1" /> </div> ); } Аудіоуроки з транскрипцією
Аудіоуроки простіші: використовуємо нативний audio з кастомним оформленням. Транскрипція виводиться під плеєром, що допомагає слабочуючим і тим, хто не може ввімкнути звук.
function AudioLesson({ lesson, onComplete }) { const audioRef = useRef<HTMLAudioElement>(null); const [currentTime, setCurrentTime] = useState(0); return ( <div className="space-y-6"> <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-8"> {lesson.content.thumbnailUrl && ( <img src={lesson.content.thumbnailUrl} className="w-32 h-32 rounded-full mx-auto mb-6 object-cover" alt="" /> )} <audio ref={audioRef} src={lesson.content.audioUrl} controls className="w-full" onTimeUpdate={() => setCurrentTime(audioRef.current?.currentTime ?? 0)} onEnded={onComplete} /> </div> {lesson.content.transcript && ( <div className="prose"> <h3>Транскрипція</h3> <p className="text-gray-700 whitespace-pre-line"> {lesson.content.transcript} </p> </div> )} </div> ); } Порівняння форматів
| Тип | Рендеринг | Прогрес | Зберігання | Складність |
|---|---|---|---|---|
| Відео | ReactPlayer (HLS) | 90% перегляду або кінець | HLS-сегменти в S3 | Висока (транскодинг) |
| Текст | Tiptap (HTML/MD) | 90% прокрутки | База даних (JSON) | Середня (редактор) |
| Аудіо | Нативний audio | 90% прослуховування | MP3 в S3 | Низька |
При переході на HLS ви економите до 50% трафіку порівняно з MP4, а використання адаптивного бітрейту знижує витрати на пропускну здатність на 30-50%.
| Характеристика | HLS | MP4 |
|---|---|---|
| Адаптивний бітрейт | Так | Ні |
| Час початку відтворення | 1-3 секунди | 10+ секунд |
| Економія трафіку | До 50% порівняно з MP4 | Неефективний |
| Підтримка субтитрів | Так | Тільки вбудовані |
| Підтримка браузерів | Всі сучасні | Всі |
Процес роботи та строки
- Аналітика — вивчаємо ваші вимоги: типи контенту, необхідна кількість уроків, інтеграції (SCORM, SSO).
- Проектування — малюємо архітектуру: моделі даних, API-ендпоінти, компоненти фронтенду.
- Реалізація — пишемо код з нуля або на основі вашої CMS. Використовуємо TypeScript, React, Next.js, Laravel (або ваш стек).
- Тестування — перевіряємо трекінг на всіх типах контенту, емулюємо повільний інтернет, тестуємо завантаження великих файлів.
- Деплой — розгортаємо на вашому хостингу або нашій інфраструктурі. Даємо доступ до вихідного коду та документації.
Орієнтовні строки: від 1 до 2 тижнів на базову систему з відео (HLS), текстом та аудіо. Якщо потрібні додаткові типи (SCORM, live-уроки) або складна аналітика — строк обговорюється окремо. Вартість розраховується індивідуально. Замовте розробку системи уроків – ми підготуємо індивідуальну комерційну пропозицію протягом 24 годин.
Що входить та гарантії
- Вихідний код системи уроків (фронтенд + бекенд)
- API для інтеграції з існуючою LMS
- Документація з розгортання та доопрацювання
- Консоль адміністрування уроків (завантаження, редагування, порядок)
- Підтримка після запуску: 2 тижні безкоштовно
Більше 5 років ми розробляємо LMS для шкіл, університетів та корпоративних порталів. Всі проєкти здаємо в строк і супроводжуємо до повної стабільності. Гарантуємо, що трекінг працюватиме при будь-яких діях користувача (перемотування, пауза, повтор). Отримайте безкоштовну консультацію по вашому проєкту – зв'яжіться з нами. Це безкоштовно.