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

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

[@yanballas3055]

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

[@flaywar2363]

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

[@andreyh6934]

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

[@user-zn7uy9cy6h]

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

[@tirthadeva_yoga]

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

[@vladimirmuratov2220]

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

[@aleksprimetv]

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

[@three-zeros]

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

[@user-gk1yb3vp4b]

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

[@user-vm2db5cq1g]

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

[@Vlad1998996]

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

[@olegsh2888]

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

[@d_r_robot]

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

[@kotegav7798]

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

[@user-dg7ri8yr7s]

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

[@sanmarchen]

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

[@caH40yc]

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

[@vadim_romanov]

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

[@deniskhasanov8296]

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

[@atmalive]

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

[@ufc_uz6]

Круто🎉

[@TheKykp]

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

[@somewonderfulguy]

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

[@kalininateach]

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

[@user-vm2db5cq1g]

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

[@mishanep]

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

[@hotmetallic]

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

[@mishanep]

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

[@dmitrypashula5489]

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

[@mishanep]

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

[@dante01rus32]

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

[@user-qh2em5cb2i]

[@muhammadaliqahhorov2475]

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

[@mishanep]

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

[@vladimirmuratov2220]

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

[@mishanep]

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

[@user-pi3fd6qo3w]

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

[@hotmetallic]

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

[@mishanep]

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

[@shashi-kf3mw]

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

[@mishanep]

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

[@evgeniykolmak5459]

единственный вопрос, как это все потом адаптировать

[@mishanep]

Aspect ratio решает этот вопрос

[@bloodymoon1896]

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

[@mishanep]

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