간단한 4단계로 URL을 사용하여 Google 드라이브에서 직접 비디오를 가져와 표시합니다.

나는 최근에 React로 웹 앱을 만들었고 내 클라이언트 비디오 중 일부를 표시해야 했습니다. Google 드라이브는 최대 15GB까지 무료이므로 이 제품이 딱 맞았습니다.

문제는 Google 드라이브 계정에 저장된 동영상을 가져와서 표시할 수 있는 쉬운 솔루션이 없다는 것입니다. 내가 찾은 옵션은 다음과 같습니다.

항목 포함
이것은 쉬운 빠른 수정이었지만 Google 드라이브에서 임베딩할 때 자체 비디오 플레이어도 얻을 수 있습니다. 여기에는 Google 드라이브 계정에 있는 비디오에 대한 링크가 있습니다. 사람들이 귀하의 Google 드라이브 계정/페이지에 액세스하는 방법을 찾을 수 있으므로 보안 위험이 될 수 있습니다.

Google 드라이브 API/Google 선택기
이것이 내 첫 번째 생각이었지만 문서의 바다에 뛰어드는 데 너무 많은 시간이 걸린다는 것을 곧 깨달았습니다(기본적으로 나는 게으르다).

URL을 가져오고 "src"속성에서 사용
StackOverflow에 대한 다양한 제안이 있었는데 그중 일부는 시도했지만 작동하지 않았습니다. 하지만 정말 간단한 방법을 찾았습니다.

비디오의 URL을 찾아 "src" 속성에 삽입

이것은 지금까지 가장 쉬운 방법이었습니다. 비디오 URL을 찾아 편집하고 Html/React 코드에 삽입하기만 하면 됩니다. 방법은 다음과 같습니다.

1 - 링크/폴더 공개
먼저 대중에게 동영상을 볼 수 있는 권한을 부여해야 합니다. Google 드라이브 폴더로 이동합니다. 폴더 이름을 클릭하여 메뉴를 엽니다. 여기에서 "공유"를 클릭합니다. 그런 다음 하단에서 "링크가 있는 모든 사용자"를 선택한 다음 창을 닫습니다.



2 - "새 창"에서 비디오 열기
폴더에서 비디오를 두 번 클릭하여 엽니다. 그런 다음 오른쪽 상단에서 "점 3개"아이콘을 클릭하여 메뉴를 엽니다. 거의 맨 아래에서 "새 창에서 열기"를 클릭하십시오.



3 - URL 수정
이제 새로 열린 창에서 URL을 복사하십시오. 다음과 같이 표시됩니다.
https://drive.google.com/file/d/1APSRoW8XLWShNkeuC7--84XSoyMdcPrP/view
이제 이 URL에 2가지 변경 사항을 적용할 것입니다. 브라우저 URL 표시줄에서 직접 할 수 있습니다.

먼저 다음 부분을 삭제합니다.

file/d/
대신 다음으로 교체하십시오.
uc?id=

둘째, URL의 마지막 부분을 삭제합니다.

/view
이제 URL은 다음과 같아야 합니다.
https://drive.google.com/uc?id=1APSRoW8XLWShNkeuC7--84XSoyMdcPrP
4 - "src"속성에 URL 삽입
이제 코드에서 동영상 요소를 추가하고 URL을 "src"속성에 붙여넣습니다.

<video 
 src="https://drive.google.com/uc?id=1APSRoW8XLWShNkeuC7--84XSoyMdcPrP" controls>
</video>

그게 다야!