2017년 12월 3일 일요일

구글 드라이브 주소로는 웹페이지내에서 재생되지 않던 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로 지정하여 저장한 후 클릭하면 재생됩니다. 

댓글 8개:

  1. gif파일을 mp4로 변환하면 자꾸 화면이 까맣게 보여서 webm으로 변환했는데 ㅋㅋㅋ 파일을 공유하려고 하니 다른 사람들은 안열린다고 하더라구요 ㅠㅠ 폰으로 webm 파일 보는 방법 검색중에 발견한 글입니다.
    정말 감사합니다ㅠ 덕분에 파일 공유도 하게 되었습니다~!

    답글삭제
    답글
    1. 댓글 감사합니다.
      말씀하신 것처럼, 저도 이 게시글을 작성하기 전까지 인터넷 어디를 검색해봐도 알 수 없었습니다.
      스스로 해결점을 찾고 게시물로 남기게 되었습니다.
      도움이 되었다는 것이 보람이 있군요.
      감사합니다.

      삭제
  2. 봐도 헤매는 1인입니다ㅠㅠ
    블로그에 플레이어 창까지는 만들어졌는데 영상은 안나오네요 먹통 ㅠㅠ
    저 예제라는 소스 말고 걍 구글드라이브 전용 쓸수있는 소스하나 만들어주심 안될까요? 링크주소만 넣고 쓰고싶은데^^;꿀팁정보 정말 감사합니다

    답글삭제
    답글
    1. 댓글 감사합니다.
      구글 드라이브에 자신이 사용할 WEBM 파일을 올리고 그것의 공유옵션에서 "공유"링크를 만들 때 "고급"을 눌러 권한을 "모든 웹 사용자"로 설정하였는지 확인하십시오.
      (그리고, 인터넷 브라우저에서 WEBM 차단이나 애드블럭으로 차단되는지 점검하십시오)

      댓글을 보고 게시물의 일부를 수정하였습니다.
      말씀하신 블로그용이라면 특별히 소스라는 것이 없습니다.
      수정된 게시물(2020년 4월18일)된 "소스"가 전부 입니다.
      (단 자신의 검은색 ID는 자신이 권한을 주고 만들어야 합니다)

      삭제
    2. 저때문에 일부로 수정까지 다해주고ㅠㅠ..정말정말 감사합니다^^
      행복하세요♡

      삭제
    3. 별말씀을요
      저도 타인이 똑같이했는데 안된다면, 블로그 게시물이 의미가 없기에 제가 감사합니다.

      삭제
    4. 정말 죄송한데요.. 수정해주신 태그
      요건 플레이어 창도 안보이네요?^^:: 전에건 동영상은 안나와도 플레이어 창은 보였는데ㅎ
      다시 도전해보고 성공하면 댓글남길께요^^ 감사합니다

      삭제
    5. 플레이에 필요한 기본조건만 작성하면 됩니다.
      그외 div 라던가 하는 것은 웹페이지에서 있으면 정렬이되는 부가적인 것입니다.

      삭제

소중한 의견, 가급적 빠른 답변을 드리겠습니다.