구글 드라이브 주소로는 웹페이지내에서 재생되지 않던 webm 파일 스트리밍 가능한 태그 (삽입) 만들기 2/2

이전 게시물(웹페이지 동영상 재생을 위한, WEBM 확장자 형식 인코딩을 위한 샤나 인코더 사용법) 을 통해서 webm 제작에 대해 설명한 적이 있습니다만, 오늘은 그 webm 파일을 자신의 웹페이지(구글 드라이브에 저장) 블로그에 올려 방문자가 삽입된 파일을 볼 수(스트리밍) 있게 하는 태그에 대한 설명입니다.

아마, 이 게시물을 찾아 오셨다면 webm 파일이 구글 드라이브에서 재생되지 않아 한참 열받아 있는 상태일지도 모르겠습니다.

현재 구글 드라이브는 파일을 올리고, 공유링크를 받게 되면 "abcd/bcd/sdklsdjlf/view?"와 같은 이상한 주소를 제공하는데, webm과 같은 동영상 파일은 링크 주소가 "abcd123.webm" 과 같은 형식의 파일이름을 가지지 않으면 "크롬이 제공하는 webm인데도 불구하고" 웹페이지(블로그 내 삽입)에서는 "이 유형의 비디오 파일은 지원되지 않습니다" 라는 메시지가 보이게 될 것입니다.
(물론, 기타 웹하드 서비스에서 "abcd123.webm" 이라는 파일 형식의 확장자로 스트림 지원하는 사이트에서는 문제없이 재생될 것입니다)
하지만, 구글 드라이브와 원드라이브등에서는 재생이 되지 않습니다.

그것에 대한 해결책입니다.
(국내 사이트를 3시간 가까이 탐색했으나 그것에 관한 것은 없어 포기할려던 찰나에, 혹시나 해서  외국 영문 사이트를 뒤져 해결 방법을 알아내고 1시간 실험을 했습니다)

*넘겨 짚지 말고, 차근히 살펴보고 따라하기를 바랍니다.

 1. 먼저 자신이 공유할 비디오 파일(webm)을 구글 드라이브에 올리고 우클릭하여 그 파일 링크 주소중 다음과 같은 id를 복사한다.

예1 :

https://drive.google.com/file/d/1AsuVv-ZUvX1HBWggwdXIZOMBD6K2m9br/view?usp=sharing
위와 같이 webm 파일을 구글 드라이브에 올리고 공유링크를 설정했다면, ID(신규주소)하나를 받을 것입니다.
위 주소중에 1AsuVv-ZUvX1HBWggwdXIZOMBD6K2m9br 라는 해당 파일의 ID만 따로 메모장에 복사합니다.
(1파일당 하나의 신규주소를 받을 수 있습니다)

2. 이제 다음과 같은 html 게시물 내용에(자신이 블로그나 타인의 웹에 올릴)태그 하나를 만듭니다.

예2 :

<div class="video" style="clear: both; text-align: center;">
<video 360="" autoplay="" loop="" muted="" width="640 height=">
        <source src="https://drive.google.com/uc?export=download&amp;id=1AsuVv-ZUvX1HBWggwdXIZOMBD6K2m9br" type="video/webm"></source>
    </video></div>
<div style="text-align: center;">
<span style="font-size: 11.8px;">설명글</span>
</div>

3. 위와 같이 파란색글씨의 태크는 고정적으로 사용되고, 자신이 올린 파일 ID에 해당하는 검은색 글씨가 바로 자신이 구글 드라이브에 '올린 파일의 구글식 링크이름'에 해당되는 것입니다.
(2018년부터 웹에서 muted="" 태그를 넣지 않으면 자동재생 되지 않도록 변경되었습니다)

4. 이렇게 하면, 이제 구글 드라이브의 "이상한 링크 주소"로 인해 재생되지 않던 webm 파일이 웹페이지에서 재생되는 것을 알 수 있습니다.

*WEBM 변환과 태그에 관한 정보가 더 필요하다면 "이전 게시물"에서 확인 하기를 바랍니다.

위와 같이 자신이 올린 파일을 재생할 때 반드시 권한을 변경하여 "모든 웹 사용자"로 설정한 후 링크를 복사한다. 

정리해보겠습니다.

1. 검은색 글씨는 자신이 구글 드라이브에 올린 파일 이름의 고유ID 이다.

2. 파란색 글씨는 자신이 올린 파일 이름을 재생해주는 고정된 링크 주소이다.

3. 이것은 구글 드라이브 주소로 재생되지 않는 webm html5, mp4에만 해당된다.

4. "WEBM파일"을 공유(공유링크를 만들 때)할 때는 반드시 "모든 사용자가 볼 수 있도록" 권한을 주어야 한다.
(또한 액세스 권한 변경한 후 그 링크를 복사해서 사용합니다)

animation GIF 파일의 움짤이 유행이지만, 용량이 크고 사운드도 없으며 화질도 나빠, webm이 대안으로 떠오르고 있습니다.

화질, 사운드, 용량에서 animationGIF는 WEBM에 상대가 될 수 없습니다.

위 동영상은 저의 구글 드라이브에 올린  WEBM 파일입니다. 
이 게시물을 따라한 학습 내용의 결과물로 용량은 418K입니다.



[구글 드라이브에 WEBM 파일 링크를 만드는 과정]


1. 적당한 WEBM 파일을 만들었다면, 구글드라이브에 파일을 올린다.

2. 그 해당파일을 우클릭하여 팝업창 상단 "공유"를 클릭한다.

3. 우측 아래 "고급"을 클릭한다.

4. 우측 해당 파일 주소에 "변경"을 클릭한다.

5. 상단 모든 웹 사용자를 선택한다.

6. 저장하고 링크를 복사하고 완료 한다.

7. 그 복사된 링크 주소를 위 예제 소스의 "검은색 글씨"에 해당되는 부분을 대체하여 사용한다.

메모장을 하나 만들어 위 그림처럼 복사하고, 확장자를 HTML로 지정하여 저장한 후 클릭하면 재생됩니다.