КАК НАПИСАТЬ свой ЮТУБ ВИДЕО-ПЛЕЕР (javascript, без либ) HD
В данном видео я вам покажу и расскажу, как можно сделать свой видеоплеер на JavaScript без каких либо библиотек. Начну с настройки вебпака и закончу декоративной иконкой переключения видео. Пройдемся по основным ивентам, которые отдает видео, и чутка по фуллскрин элементам. Исходники проекта - https://github.com/BrooonS/youtube-player БЭМ - https://ru.bem.info/methodology/quick-start/ Таймкоды: 0:00 Что будет в видео 0:25 Установка и настройка Webpack 4:32 Пишем основной HTML и CSS 9:01 Начало JS функционала (воспроизведение, инит класса) 12:47 Выводим длину видео 19:02 Открытие на весь экран через двойной клик 22:07 Кнопка Play/Pause (+ подключение FontAwesome) 26:55 Таймлайны и хинт (основная, текущая и при наведении линии) + чуть стилей 36:21 Громкость 44:55 Кнопка фуллскрина 46:37 Обработчики страницы (пробел, перемотка стрелками) 47:58 Исчезание/появление интерфейса 50:02 Большая иконка переключения по середине видео 51:32 Окончание • Youtube - https://youtube.com/ValeryStrelets • Telegram - https://t.me/ValeryStrelets • Instagram - https://instagram.com/ValeryStrelets Музыка с видео: Pixel Terror - Dilemma (feat. DYSON) [Monstercat Release] – https://www.youtube.com/watch?v=C2OZhgIun94 "Slow Drive" - Smooth Rap Beat – https://www.youtube.com/watch?v=DSG6NuoesiI
Похожие видео
Показать еще