Добавление видео в React приложение

Рет қаралды 5,924

Ай бұрын

Смотрим как добавить видео без просадки производительности React приложения. Используем библиотеку react-player на примере добавлении нескольких KZbin видео.
Библиотека из видео github.com/cookpete/react-player
Пример из видео: github.com/michey85/with-video
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 45

@yanballas3055 Ай бұрын

Не по колокольчику, а по зову сердца

@andreyh6934 Ай бұрын

Спасибо, Михаил! Как всегда подробно и без воды. Все, что нужно для собственного применения !

@flaywar2363 Ай бұрын

Очень интересно еще посмотреть как делать проигрывание видео при наведении, как это есть на KZbin

@user-zn7uy9cy6h Ай бұрын

Круто!!! Спасибо! Я прямо как знал использовать на работе эту библиотеку. Теперь еще эти опции добавлю, и будет просто бомбезно)))

@aleksprimetv Ай бұрын

Познавательно, никогда не приходилось с этим работать, но теперь есть понимание!

@tirthadeva_yoga Ай бұрын

О, Михаил, большущий респект за видео 🙏🏻 Как раз то, что нужно было.

@vladimirmuratov2220 Ай бұрын

Как всегда очень интересно. Большое спасибо! 😊

@three-zeros Ай бұрын

Спасибо, Михаил! Как раз на работе понадобилось)

@olegsh2888 Ай бұрын

Вот это я флешбэки словил про компонент video для автобренда на букву Х)) Отличный видос!

@user-gk1yb3vp4b Ай бұрын

Круто, как всегда информативно

@Vlad1998996 Ай бұрын

Спасибо что показал, еще раз пересмотрю ролик

@user-vm2db5cq1g Ай бұрын

Вот это круто))) спасибо Михаил!!!

@kotegav7798 Ай бұрын

Спасибо! Записал) Ещё интересно было бы посмотреть про видео обои. Твои идеи реализации и с помощью чего. Не так давно сам решал задачу подключения видяхи как фона с автопроигрыванием. Очень прикольная задачка. И особенно прикольно из-за сафари, который какой-то своей жизнью и логикой живёт)) Кстати тема кроссбраузерности вообще интересна) Можно много видео снять)

@d_r_robot Ай бұрын

Спасибо Михаил!

@user-dg7ri8yr7s Ай бұрын

прикольная тема! спасибо!

@sanmarchen Ай бұрын

Спасибо огромное 😊

@deniskhasanov8296 Ай бұрын

Спасибо. за лайфхак

@caH40yc Ай бұрын

лайк поставил, посмотрю позже ))

@atmalive Ай бұрын

Спасибо! В яблочко как рза!

@vadim_romanov Ай бұрын

топ как всегда

@ufc_uz6 Ай бұрын

Круто🎉

@TheKykp Ай бұрын

Да, крутая штука, я тоже юзал

@kalininateach 6 күн бұрын

Спасибо за видео! А кастомную кнопку "пауза" как можно реализовать? Мне пока идея пришла через событие onPause, но может есть что-то проще)

@somewonderfulguy Ай бұрын

Должен сказать, что пару недель назад пробовал HLS видео вместе с react-player. Библиотека серьезно глючит при работе с HLS. А именно, я не могу включить субтитрьі в связке с HLS и падают ошибки когда я меняю время кастомньім контрол баром (сам плеер не падает, но в консоль срет). Поєтому я перешел на просто HTML5 видео плеер. Для HLS єто наиболее безболезненное решение. Но в остальном (не hls видео) я бьі использовал react-player.

@hotmetallic Ай бұрын

А если нужно проиграть видео по ховеру? Типа shorts на youtube

@mishanep Ай бұрын

Так а в чем сложность? Есть булевое поле для проигрывания видео, переключать его можно по-разному. onMouseOver и вперед.

@user-vm2db5cq1g Ай бұрын

Михаил скажите пожалуйста, а будет ли видео, когда надо вставить видео с сервера backend, а не из других источников, какие там есть нюансы и особенности оптимизации?? Чтобы видео включалось частично загружаясь , до полной загрузки, думаю это было бы очень интересно!)

@mishanep Ай бұрын

Если буду что-то такое реализовывать, то поделюсь. Пока прецедента не было.

@dante01rus32 4 күн бұрын

Удобная либа) с видео из вк и рутуба не работает?

@dmitrypashula5489 Ай бұрын

Спасибо Михаил) Есть вопрос. Когда будет целесообразно тянуть в проект эту либку тем самым увеличивать bundle size почти на 30 кб ( смотрел через bundlephobia ) ?

@mishanep Ай бұрын

Тогда как рассмотренный на видео кейс будет иметь место. В принципе у того же ютуба есть доступный api и можно самостоятельно описать похожий функциоанал. Ключевая идея - отложенная загрузка видео. Ведь несколько мегабайтов видео, которое грузится сразу, куда как чувствительнее 30-ти килобайтов зависимости.

@vladimirmuratov2220 Ай бұрын

Михаил, а вам приходилось реализовывать оплату на сайте? Как это вообще делается? Может расскажите? 😊

@mishanep Ай бұрын

Делал когда-то. Здесь множество нюансов, начиная с правовой базы, в рамках которой существует приложение. Я делал интеграцию с Робокассой по их документации. PayPal отдельно подключал. Со Stripe немного работал в рамках европейского проекта.

@muhammadaliqahhorov2475 Ай бұрын

Можно ли сжать размер видео (МБ) в React с помощью ffmpeg?

@mishanep Ай бұрын

Реакт этим не занимается. Это задача для сервера.

@shashi-kf3mw Ай бұрын

А есть либа для анализа громкости звука?

@mishanep Ай бұрын

Не интересовался этим вопросом.

@user-qh2em5cb2i Ай бұрын

@hotmetallic Ай бұрын

А что если собственный файл-сервер и там видео?

@mishanep Ай бұрын

Когда собственная разработка, там и управления больше. Фронт и бэк могут по-разному между собой договориться как оно будет выглядеть. Где-то может и подобная библиотека пригодиться, а где-то и штатными средствами html обойтись.

@user-pi3fd6qo3w Ай бұрын

просто тестирую комменты 1:123 1:12 03:12 3:64 11:00

@bloodymoon1896 Ай бұрын

Как сделать видео в разрешение в 9:16?

@mishanep Ай бұрын

Я использовал компонент Aspectratio из chakra ui. Там пропсом задаётся соотношение сторон. Но можно самому подобный компонент реализовать. В современном css есть свойство aspect-ratio.