Главная страницаКатегория htmlHTML5 Медиа: Аудио, Видео и WebRTC

HTML5 Медиа: Аудио, Видео и WebRTC

Name: HTML5 Медиа: Аудио, Видео и WebRTC
Rating: 4.6 (15 reviews)

HTML5 Media: Audio, Video & WebRTC

frontendmasters

★4.6 (всего оценок - 15)

Продолжительность

5 ч 9 мин

Категория

HTML

Количество уроков

45 Видео

Дата добавления

22 февр. 2017 г., 00:00

Язык

Английский

Дата обновления

28 апр. 2026 г., 20:49

HTML5 медиа‑технологии открывают доступ к аудио, видео, потоковой трансляции и обработке мультимедиа прямо в браузере. Этот курс даст вам практические навыки работы с современными API и поможет уверенно создавать собственные плееры, эффекты и инструменты реального времени.

Что вы изучите в курсе

Программа знакомит с ключевыми медиа‑возможностями HTML5, от базового воспроизведения аудио и видео до потокового обмена и живой обработки данных.

Работа с HTML5 аудио и видео

Создание собственных плееров на основе HTMLMediaElement.
Подключение пользовательских контролов и обработчиков событий.
Управление воспроизведением, позиционированием, скоростью и качеством.
Использование Media Source Extensions для динамической загрузки контента.

Доступ к камере и микрофону с GetUserMedia

Получение видеопотока пользователя через MediaDevices.getUserMedia().
Обработка разрешений и ошибок.
Вывод камеры на страницу и подготовка к дальнейшей трансформации.

WebRTC для реального общения

Основы Peer‑to‑Peer соединений.
Настройка обмена медиа между пользователями.
Создание базового видеочата в браузере.
Разбор ICE‑кандидатов, SDP и сигнального обмена.

Видеоэффекты с canvas

Передача видеопотока в canvas.
Создание фильтров в реальном времени — от простых до продвинутых.
Работа с пиксельными данными и анимацией.

Введение в Web Audio API

Настройка аудиоконтекста и цепочек обработки.
Визуализация звука с помощью анализаторов.
Создание эффектов: реверберации, задержки, фильтров.

Кому подойдет курс

Курс подходит разработчикам, которые хотят:

создавать современные медиа‑приложения без сторонних библиотек;
понять основы потоковой связи и работы с камерой;
освоить инструменты HTML5 для обработки видео и аудио.

Практическая часть

В процессе обучения вы разработаете несколько медиа‑проектов:

аудио‑ и видеопроигрыватели с кастомным UI;
мини‑видеочат на WebRTC;
фоторедактор с эффектами в canvas;
аудио‑визуализатор на Web Audio API.

Итог

Освоив инструменты аудио, видео, WebRTC и Web Audio API, вы сможете создавать мощные медиа‑сервисы, работать с потоками в реальном времени и внедрять интерактивные эффекты прямо в браузере, используя только силу HTML5.

Удален по просьбе правообладателя

Урок 1.00:12:38
Introduction to HTML5 Media
Урок 2.00:04:25
Support
Урок 3.00:09:04
Containers and Implementation
Урок 4.00:06:26
HTML5 Video with Fallback
Урок 5.00:04:10
Assignment 1 - Build a Player
Урок 6.00:04:49
Assignment Media Files
Урок 7.00:07:59
Mark's Projects
Урок 8.00:01:27
Assignment 1 - Solution
Урок 9.00:05:38
Tools and Services
Урок 10.00:05:54
Assignment 2 - Configure and Encode Media
Урок 11.00:07:07
play(), pause(), setMedia() and canPlayType()
Урок 12.00:10:01
Audio and Video API Resources
Урок 13.00:03:35
Creating your first Audio Player
Урок 14.00:03:18
Assignment 3 (with solution) - Create a Custom
Урок 15.00:05:24
Preloading and Buffering
Урок 16.00:07:43
Seeking, Seekable and Displaying Time
Урок 17.00:06:10
Anatomy of a Progress Bar
Урок 18.00:04:12
Playlists
Урок 19.00:10:57
Assignment 4 - Adding a Functional Progress Bar
Урок 20.00:03:02
Assignment 4 - Solution
Урок 21.00:06:54
WebVTT
Урок 22.00:05:52
WebVTT Capabilities and Support
Урок 23.00:08:24
Subtitle Resources
Урок 24.00:05:02
Playback Rate
Урок 25.00:03:24
Assignment 5.5 - Add playbackRate Capability to your Player
Урок 26.00:05:14
Assignment 5.5 - Solution
Урок 27.00:12:39
Canvas and Video
Урок 28.00:05:02
Creating Simple Effects
Урок 29.00:09:51
More Canvas Examples
Урок 30.00:08:20
Assignment 6 - Manipulating Color
Урок 31.00:09:58
Assignment 6 - Solution
Урок 32.00:08:59
WebRTC Introduction and Components
Урок 33.00:06:59
MediaStream API
Урок 34.00:05:51
PeerConnection and DataChannel API's
Урок 35.00:08:40
WebRTC Support and Resources
Урок 36.00:10:55
Assignment 7 (and solution) - WebRTC
Урок 37.00:06:37
Audio and Video Limitations
Урок 38.00:09:16
Web Audio API
Урок 39.00:03:29
Node-based Approach
Урок 40.00:01:26
Assignment 9 (and solution) - Using the Audio API
Урок 41.00:05:01
Web Audio API Examples
Урок 42.00:09:58
Creative Examples
Урок 43.00:08:52
PopcornJS
Урок 44.00:05:42
Audience Question
Урок 45.00:13:25
Wrap-up

Автор - frontendmasters

frontendmasters

FrontendMasters — одна из ведущих онлайн-платформ для изучения фронтенд- и веб-разработки. Курсы представлены в формате видеоворкшопов и преподаются практикующими экспертами из крупных технологических компаний. Платформа охватывает широкий спектр современных технологий (JavaScript, React, TypeScript и др.) и делает упор на глубокое понимание и применение знаний на практике.

+793

Комментарии

usedev
12 янв. 2023 г., 13:12
From the course page:

'Though some of the concepts in this course are still relevant, overall this course does not reflect our current course standards.'

Old. From 2014. Probably not worth it.