Недавно я создал веб-приложение на React, и мне нужно было отобразить несколько видеороликов моих клиентов. Поскольку google drive бесплатно предоставляет до 15 ГБ, это был идеальный вариант.
Проблема заключалась в том, что не было простого решения для получения и отображения видео, хранящихся на нашем аккаунте google drive. Вот какие варианты я нашел:
-
Вставить элемент
Это было простое решение, но при вставке из google drive вы также получаете их собственный видеоплеер. Здесь у вас есть ссылка на видео в аккаунте google drive, что может быть риском для безопасности, поскольку люди могут найти способ получить доступ к вашему аккаунту/странице google drive. -
Google drive api / Google picker
Это была моя первая мысль, но я быстро понял, что на погружение в океан документации уйдет слишком много времени (в общем, я ленив). -
Получить URL и использовать в атрибуте «src»
На StackOverflow было много различных предложений, некоторые из них я попробовал, но они не сработали. Но я нашел один действительно простой способ сделать это.
Найти URL видео и вставить в атрибут «src»
Это, безусловно, самый простой метод. Вы просто находите и редактируете URL видео и вставляете его в свой код Html/React. Вот как это делается:
1 — Сделать ссылку/папку общедоступной
Сначала нам нужно дать публичное разрешение на просмотр видео. Перейдите в папку диска Google. Щелкните на имени папки, чтобы открыть меню. Здесь нажмите на «Поделиться». Затем внизу выберите «Любой, у кого есть ссылка», после чего закройте окно.
2 — Открыть видео в «новом окне»
В своей папке дважды щелкните по видео, чтобы открыть его. Затем в правом верхнем углу нажмите на значок «3 точки», чтобы открыть меню. Почти в самом низу нажмите на «Открыть в новом окне».
3 — Отредактируйте URL
Теперь скопируйте URL во вновь открывшееся окно. Он будет выглядеть примерно так:
https://drive.google.com/file/d/1APSRoW8XLWShNkeuC7--84XSoyMdcPrP/view
Теперь мы собираемся внести 2 изменения в этот URL. Вы можете сделать это прямо в строке url браузера:
- Во-первых, удалите эту часть:
file/d/
и замените ее на эту:
uc?id=
- Во-вторых, удалите последнюю часть url:
/view
Теперь ваш url должен выглядеть следующим образом:
https://drive.google.com/uc?id=1APSRoW8XLWShNkeuC7--84XSoyMdcPrP
4 — Вставка url в атрибут «src»
Теперь в коде добавьте элемент видео и вставьте url в атрибут «src»:
<video
src="https://drive.google.com/uc?id=1APSRoW8XLWShNkeuC7--84XSoyMdcPrP" controls>
</video>
Вот и все, друзья!