2020년 중,하반기부터 구글 블로그 새 디자인 적용시 지원하지 않는 source 태그.

2020년 중반 부터 구글 블로그가 새 디자인으로 바뀌면서, 구글 블로그 내 "WEBM " 반응형 웹페이지에 삽입된 영상 태그 중 soruce 태그가 작동하지 않게 변경 되었습니다.

*구글 블로그 사용자는 "BR" 태그의 악명을 잘 알 것입니다.
(매번 삭제하느라 얼마나 신경 쓰이는지 말이죠)

*주 : 새 디자인으로 인한 html 'source' 태그를 반드시 바꾸어야 하는 것은 아닙니다.

살펴 보시죠.

뉴 블로그 디자인 변경으로, 기존 소스 태그가 정상적으로 동작하지 않게 되었습니다.
(이 경고를 무시해도 웹페이지가 잘못되는 것은 아니지만, 여간 신경 쓰이는 것이 아닙니다)

위 그림처럼 "div 나 video"태그의 문제가 아닌, source 태그의 문제임을 알게 되었습니다.
(소스 태그를 삭제하고 비디오 태그 안에 영상 주소를 넣으면 문제가 해결 됩니다)

아래는 반응형 웹페이지 구글 블로그 내 html 태그 입니다.

--------------

<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=1UahNUnh96a73VVd37ogKvQ-f0SUjYeAv" type="video/webm"></source>

    </video></div>

<div style="text-align: center;">

<span style="font-size: 11.8px;">영상 설명 지문</span>

</div>

--------------

위는, 기존 구 블로그에서 WEBM 파일 블로그내 삽입 영상이 구글 블로그에서 동작이 가능하고, 소스 태그가 작동했던 예입니다.
(여전히 동작하지만, HTML 소스를 편집하면 태그를 지원하지 않는 경고를 볼 수 있습니다)

새 블로그 디자인으로 변경 된 후, 위와 같이 사용하면 HTML에서 지원하지 않습니다.
따라서, 새 디자인에서 적용 가능한 변경 방법은...

--------------

<div class="video" style="clear: both; text-align: center;">

<video 360="" autoplay="" loop="" muted="" width="640 height=" src="https://drive.google.com/uc?export=download&amp;id=1UahNUnh96a73VVd37ogKvQ-f0SUjYeAv" type="video/webm">

     <source></source>  -- 소스 태그 삭제

    </video></div>

<div style="text-align: center;">

<span style="font-size: 11.8px;">영상 설명 지문</span>

</div>

--------------

위 그림처럼, video 소스에 붙혀 묶고 소스 태그를 삭제하여 변경하면 될 것입니다.

*기타 태그 기능 

경우에 따라 자동 플레이를 원하지 않는다면, "controls" 태그를 삽입하십시오.
(예 : autoplay="" 를 controls="" 로 바꿉니다)

아래 WEBM 영상은 변경 후, 적용한 태그 작동 실험 예일 뿐 영상 내용을 언급하는 것은 아닙니다. 

이 WEBM 영상은 모바일에 최적화 되지 않았습니다.
(원활한 시청을 위해 불필요시 화면을 정지 시켜 주십시오)

[잡담]

개인적으로, 구글 블로그가 변경이 있을 때 마다 모든 게시물을 재수정하다가 이제는 거의 포기 상태입니다.

1. 게시물 정렬 사건 - 정렬 태그가 좌측에서 중앙으로 바꾸어야 할 이벤트가 생겼을 때.
(디자인 변경)

2. BR 태그 일일이 고칠 때 - 이제는 적응되어 버렸어.
(자동 생성되는 div 태그와 함께 정말 피곤하게 한다)

3. 이번처럼 비디오 태그 일부가 잠수함 패치로 지원하지 않을 때.

(그 많은 것들은 도대체 언제 고치지?)

4. 반응형 웹페이지(스마트폰 이용시)문제로, 모든 게시물 영상을 다 바꾸어야 했을 때.

구글 블로그 "반응형 웹페이지" 작성시(PC웹페이지와 모바일에서 동영상 자동 변경(비율) 문제) 동영상 관련 태그에 대한 삽질 경험 정리.

요즘은, 모바일로 검색하는 사람이 많아졌는데 구글 블로그가 참으로 답이 없을 정도로 대응력이 떨어진다는 것을 알 것입니다.
(모바일 관련 위젯은 따로 설정하는 것이 없고, 이미 구글이 정해 놓은 폼을 똑같이 따라갑니다)

가령, 제가 블로그 게시물을 올리고 모바일로 탐색을 해보면 불편한 점이 발견되는데 추가로 수정하고 싶어도 할 수 있는 것이 거의 없다는 것이죠.

이미지를 홈페이지에 올린다고 하면 자동으로 이미지는 테이블 태그에 넣어지는데, 숙련되었다 하더라도 이미지 넣는 것부터 시작해서 좌우 정렬, 동영상 하나 넣는 것까지도 제법 노력이 있어야 됩니다.

오늘은, 요즘 많이 사용하는 "모바일 탐색"에 맞춰 구글 블로그에서 자동 화면 크기(변화)에 대한 삽입된 동영상이 화면(가로 넓이)을 넘쳐버리는 문제에 대해 나름 해결한 방법을 설명할까 합니다.
(PC용 웹에서는 좌우 정렬과 이미지와 동영상 보기가 제대로 구현했다 하더라도, 모바일에서 게시물 배치(프레임)가 제대로 되지 못하는 (반응형 웹페이지)문제에 대한 이야기입니다)

내가 시도 해본 것 중...

*인터넷 검색을 통해 "반응형 웹페이지" 태그를 살펴보면, 대부분 다음과 같은 태그 문장을 알 수 있고 따라하면 해결된다고 합니다.

<div style="position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0;">

<iframe width="16" height="9" src="https://www.youtube.com/embed/유튜브 영상?frameborder="0" allowfullscreen="" style="position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>

</div>

하지만, 위의 경우(CSS 추가방식이 아님)는 단순한 웹페이지나 프레임 상위에 삽입할 경우나 작동하지.., 테이블 태그가 포함되거나 미디어가 게시물 중간에 삽입, 많은 프레임과 미디어 종류가 동영상이 다수인 경우 제대로 동작하지 않더군요.
(더군다나 저처럼 프레임이 3개이고, 각종 미디어 포함, 테이블 태그와 TR태그등을 사용하면 엉망이 되어 버렸습니다)

살펴 보시죠.
(다음과 같은 방식으로 변경하니, 작동하였습니다)

수정된 완료된 결과물 입니다.

*반응형 웹페이지 자동변경이 안되어 고민이고 이 게시물로 방문했다면, 이 웹페이지 하단 "유튜브 / WEBM"파일을 통해 해결되었음을 알 수 있습니다.

(즉, 반응형 웹페이지 설정 이전에는 모바일에서 유튜브 동영상이 웹 프레임 화면밖으로 넘쳐 버렸었다는 것이죠)

우선 자신의 구글블로그에서 "테마" "맞춤설정"으로 들어갑니다.

자신의 템플릿도 어느정도 영향을 미치기에,

본인이 평소에 선호하는 이미지 사이즈를 고려해서 웹페이지를 작성합니다.
(예 : 만약 내가 주로 블로그를 사용할 때 6~700픽셀 사이즈의 이미지를 넣는다고 가정한다면...)

즉, 웹페이지에 삽입할 영상이(유튜브) 가로 640이라고 할 때 넓은 프레임을 구현하는 웹 브라우저에서는 아무 문제가 없겠지만,
모바일 플랫폼에서 자동으로 맞춰 줄어드는 이미지와 달리 동영상은 양쪽 프레임 때문에 줄어들지 않고 튀어나오게 됩니다.

그러므로 그것을 해결하기 위해 구글 블로그 웹게시물에서는...

인터넷에서 검색하여 시도한 태그는 작동하지 않았기에 다른 방법으로 "CSS"를 추가하는 방식을 선택했습니다.
(인터넷을 뒤져 지정된 프레임 템플릿 구조인 구글 블로그에 대응 법으로는, 이것이 가장 효과적이라 판단 되었습니다)

그림처럼 글자(다운로드는 바로 아래)를 모두 복사해서 블로그 테마 디자이너 CSS 항목에 추가해 줍니다.
(세부 설명은 다음과 같습니다)

초록색 ".video" 와 ".video-container" 는 웹페이지 작성시 내가 호출할 속성 이름입니다.
56.25%는 알려진 16:9 비율값인데, 구글 템플릿에 따라 달라져 저는 51.80%로 맞추었습니다.
(왜 2개가 있냐하면, 미디어 종류마다 가로/세로 비율이 달리 표현되었기 때문입니다)

위의 .video는 웹페이지 WEBM 비디오용이고, 뒤의 video-container 는 웹페이지내 유튜브 대응용 입니다.
(서로 다른 종류 중, WEBM 영상은 56.25%를 적용하고, 유튜브는 98% 51.80% 사이즈를 적용 시킬 것이라는 내용입니다)

잘 모르겠다면, 일단 이것을 "DownLoad" 받아 CSS에 추가하고, 우측 상단 "블로그에 적용"을 누르세요.

그리고, 작성된 구글 블로그 웹페이지에서...

적용시킬 동영상이 WEBM 이라면 .video를 사용하고, 유튜브라면 .video-container 를 사용하면 됩니다.

설명 : 

video를 호출받은 CSS 내용에 따라 크기가 웹페이지에 맞게 변경되며 가로/세로 100%  16:9비율이 56.25%로 맞춰 적용됩니다.
(이것은 블로그 너비와 템플릿에 따라 달라질 수 있습니다)

video-container를 사용하면, CSS 내용에 따라 크기가 웹페이지에 맞춰 변경되며 가로/세로 98%, 16:9 비율이 51.80% 가 적용됩니다.
(이것은 블로그 너비와 템플릿에 따라 달라질 수 있습니다)

*이제 TABLE 태그를 사용한 미디어가 있거나, 미디어 사이에 중간에 코드를 삽입해도 문제가 발생하지 않게 되었습니다.

위 그림처럼, 적용한 후 웹페이지를 작성한 다음 모바일이나 구글 모바일에서 시험해보면, 화면이 넘치지 않는 유튜브 동영상을 볼 수 있습니다.
(웹페이지 반응형으로 동영상이 모바일 화면에 따라 변경될 것입니다)

*참고 사항(미디어 포함 태그 사용시) :

*모바일 보기에서는 구글 블로그에 삽입된 이미지가 모바일에 맞춰 자동 변경되므로, 별도 작업이 필요 없습니다.
(jpg, png, gif....., 물론, 웹페이지 게시물 작성시는 사이즈를 일정하게 맞춰야 하겠죠?)

*Table 태그에 포함 시켜 저 문구를 사용하지 마십시오.
(동작하지 않습니다)

*해당 동영상의 TD TR 태그 사용시에도 작동하지 않을 수 있습니다.

* 아래 문구는 해당 종류의 영상마다 반드시 넣어 십시오.

 WEBM : <div class="video" style="clear: both; text-align: center;">

유튜브 : <div class="video-container" style="clear: both; text-align: center;">

*WEBM 영상은 아직 모바일 비율로 인한 반응형은 작동하지만, 화면이 줄어들지는 않습니다.
(이것은 저도 해결 방법이 없습니다)

즉, 화면이 넘치는 것만 해결한 상태입니다.
*다른 좋은 방법을 알고 있거나, 해결 하신 분은 알려주십시오*

Tip1 :
구글 블로그에서는 웹페이지 작성시 이미지나 동영상을 정렬은 가운데 정렬을 추천하며...
HTML 수정을 통해 테이블로 묶여있는 테이블과 테이블, 이미지와 이미지(or 동영상) 사이의 /BR 태그를 삭제하는 것이 깔끔합니다.
(좌우 정렬보다 미디어는 중앙 정렬 태그를 적용하십시오)

Tip2 :
웹페이지를 작성할 때부터 이미지나 동영상은, 가로 크기를 통일 하십시오.
(공통적으로 프레임도 작성될 웹페이지의 멀티미디어 소스를 고려한 사이즈로 수정하는 것이 좋습니다)

WEBM 테스트 영상
(웹페이지 정상, 모바일에서 영상 사이즈가 넘치지는 않지만 전체 프레임은 유지가능)

유튜브 테스트 영상
(웹페이지 정상, 다양한 모바일 사이즈에 맞춰 자동으로 프레임을 유지)

구글 웹브라우저 크롬에서 webm 파일이 자동재생이 되지 않을 때(업로드,html)

2018년 어느 순간부터(정확히는 웹브라우저 업데이트 후), 여러가지 충돌 or 정책의 이유로 브라우저에서 자동재생 미디어 파일을 막고 있습니다.
(그중 하나인, webm은 플래시 대안으로 html5 저용량 미디어파일로 gif를 대신하여 반복영상에 사용되는 대표적 포맷입니다)

앞서 말한바와 같이, 각종 충돌 or 기타 다른 이유등으로 자동재생 되지 않는 webm은 오디오 뮤트태그를 적용함으로 자동재생이 정상적으로 동작함을 확인 할 수 있었습니다.
(Gif 애니메이터는 막히지 않았지만, 용량이 너무 크므로 이제 사용되지 않는 분위기입니다)

만약, 자신의 webm 자동재생 파일에 문제가 있다면, 태그에 muted=''" 옵션을 추가하십시오.
(오디오가 활성화 된 경우 자동재생 되지 않으며, 역동적인 웹보다 안정성이 우선이라고 판단한 것 같습니다)

*단, 자동재생이 아닌 일반재생의 경우는 음소거(muted)를 하지 않아도 정삭적으로 보여집니다.

예제 :
    <video 360="" autoplay="" controls="" loop="" width="640 height=" muted="">
        <source src="https://drive.google.com/uc?export=download&amp;id=1G9UYjg9sz7JAopkUY0-iImmmwZTmA9yn" type="video/webm"></source>
    </video>

위와 같은 동영상 주소가 있다고 하면, 붉은색 표시된 태그를 삽입하면 됩니다.

이 게시물은 모바일에 최적화된 화면이 아닙니다.

webm 영상은 위 주소를 링크한 것이며, muted 태그로 자동재생되는 것을 보여주고 있습니다.
*기타 : 애플브라우저인 사파리에서는 Html5 Webm 은 재생되지 않습니다. 

자신의 블로그(웹페이지)에 유튜브 동영상 링크(태그)시켜 게시하기.

유튜브 동영상을 올린 것이나, 타인의 유튜브 영상을 자신의 블로그나 기타 웹페이지에 링크시킬 경우 html 태그 사용방법입니다.
(단, 기타 게시판에 올릴때는 그곳의 형식을 따릅니다만 이것은 범용적 태그 방법입니다)

1. 자신이 유튜브에 올렸거나 링크 시킬 동영상 주소를 복사합니다.
(예 : https://youtu.be/nzs1PKhte5I )

2. iframe 태그로 게시할때는 아래와 같이 1번의 주소부분만을 복사하여 아래태크에 붙혀넣습니다.
<iframe width="640" height="360" src="//www.youtube.com/embed/nzs1PKhte5I?showinfo=0&fs=0&rel=0" frameborder="0" allowfullscreen></iframe>

3. embled 태그로 게시할때도 마찬가지 입니다.
<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/nzs1PKhte5I?showinfo=0&fs=0&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/nzs1PKhte5I?showinfo=0&fs=0&rel=0" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>

4. 테이블에 결합할때 방법인데, 제가 주로 사용하는 태그입니다.
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><iframe width="640" height="360" src="//www.youtube.com/embed/nzs1PKhte5I?showinfo=0&fs=0&rel=0" frameborder="0" allowfullscreen></iframe></td></tr>
<tr><td class="tr-caption" style="text-align: center;">동영상 설명 쓰기</td></tr>
</tbody></table>
<br />

설명 :
1. 640과 360은 임의의 비율 사이즈이며, 원본을 비율 축소하여 보여주기만  합니다.
(원본 영상의 16:9나 4:3 (원본의 비율)의 사이즈 유지하려면 축소시켜 보여줄 때도 같은 비율로 정해주는 것이 보기에 좋겠죠)

2. 그외 태그는 공통적으로 사용되는 것들입니다.

아래의 4번 방법을 이용하여, Tag한 블리쟈드 코리아 공식 유튜브 영상의 실험입니다.

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

웹페이지 동영상 재생을 위한, WEBM 확장자 형식 인코딩을 위한 샤나 인코더 사용법 1/2

플래시 동영상의 보안 문제로 인해, 서서히 webm 이라는 확장자를 가진 웹페이지형 동영상 코덱에 관심을 보이는 것 같습니다.

*조만간 모든 인터넷 브라우저에서는 플래시가 퇴출 될 것이라 확실시 되고 있습니다.
(저는 없어지지 않을 것이라고 보는데, Adobe의 플래시는 애니메이터에겐 중요한 프로그램입니다)

플래시가 다양한 웹브라우저에서 사용이 가능한 것에 비해, webm은 현재(2016년) 그나마 webm이 파폭에서는 그냥 재생이됩니다만 엣지를 비롯 크롬/ IE11등에서는 추가로 플러그인을 요구하거나 재생되지 못하는 문제가 있습니다.
(물론, 플래시도 기본적으로 플래시 플레이어를 업데이트 해야 하지만...)

다음은, 무료 공개 프로그램인 샤나 인코더로 동영상을 webm포맷으로 변환 하는 방법입니다.
(기타 swf나 mp4, h264등, 용량 축소, 변환에서 그 어떤 무거운 인코딩 프로그램보다 가벼우면서 탁월한 편리성을 보여주므로, 팟인코더보다 샤나인코더를 추천합니다)

*플래시보다 동일 화질에서 약간 더 용량 증가가 있지만, 평균적으론 용량은 비슷하다고 볼 수 있습니다.

1. 최근 3.8로 업데이트 되었고, 이전버전에 비해 달라진 것이 없어 보이지만
사소하게 편리성이 개선된 것을 알 수 있었습니다.

https://shana.pe.kr/

*새 버전 업데이트 설치 :
기존에 설치된 구버전이 있고, 새로히 새 버전을 받아 설치 시도를 하게 되면, 기존의 버전을 발견하고 삭제하라는 메시지가 나옵니다.

구 버전을 제거할때 기존 프리셋을 삭제할 것이냐고 묻게 되므로, 기존 프리셋을 필요할 경우 그대로 놔두고, 새 버전을 같은 디렉토리에 설치하면 됩니다.

2. 기존 프리셋도 그대로 보존되었으며, 빠른 설정도 우측에도 별도로 만들어주었고, 빨간색 화살표로 기존처럼 없앨 수 도 있습니다.

3. 기본 프리셋에서 webm을 선택하고, 세부설정을 위해 "빠른 설정"을 클릭합니다.

4. 보통 기본 비디오 코덱은 VP8입니다.
(이후 VP9까지 현재 나왔습니다)

5. 오디오코덱은 VORBIS를 많이 사용합니다.
(저는 불필요할 경우 오디오를 "인코딩 안함"을 선택하고 용량을 줄입니다)

*인코딩 안함이란, 동영상 변환/축소 인코딩시 아예 제외된다는 뜻입니다.

6. 용량의 대부분을 비트레이트가 차지하게 되는데, 절대 눈뜨고 못 볼 화질을 보여주면 의미가 없기에, 적당선에서 웹에서 보여 줄만한 수준으로 타협합니다.
(개인적으로, 1000~2000정도를 많이 사용하지만, 움직임이 적은 동영상에 따라 6~700도 사용합니다)

7. 원본 비율을 따라 축소해야 화질 변질이 없어지기에 비율은 가급적 맞추어 줍니다.
(예: 1920x1080 의 축소 비율은 1280x720입니다)

8. 가끔 특정 동영상에서 필요한 부분이 한 부분일 경우 잘라냄과 동시에 인코딩하기도 합니다.
(1회일 경우입니다, 다중 영상이 잘라지지는 않습니다)

*그렇게 복잡한 경우는 프리미어 프로와 같은 어도비를 사용해야 합니다.

9. 인코딩 과정입니다.
(추측 용량과 실제용량은 동영상에 따라 차이가 있습니다)

비트레이트가 인코딩시 동영상 구간에 따라 달라지므로, 평균추측용량보다는 대체적으로 적습니다.

10. 바탕화면에 webm 확장자를 가진 영상이 만들어졌습니다.
(파폭 아이콘을 되어 있는 것은, 제 시스템에서 확장자 연결을 파폭으로 했기 때문입니다)

*webm도 동영상이므로, 각종 비디오 플레이어에서 당연히 재생됩니다.

11. 바로 클릭하면 위와 같이 파폭에서 바로 동영상이 재생되는 것을 알 수 있습니다.

마지막으로, 각종 게시판에 webm을 제작해서 올릴경우 동영상 태그입니다.

<video controls autoplay loop width="600 height="338">
<source src="올린 동영상의 링크" type="video/webm"></video>
를 사용하거나,
<video 338="" autoplay="" loop="" controls="" width="600 height=">
<source src="올린 동영상의 링크" type="video/webm"></source>
를 사용합니다.

*참고 :

autoplay는 "" 안에 0 또는 1을 선택합니다.
loop, controls 도 마찬가지 0 or 1을 선택합니다.
디폴트는 "" 입니다.
0과 1은 "가능/불가능"의 활성화 코드입니다.

*플래시와 달리 webm은 마우스 우클릭 메뉴를 사용할 수 있습니다.
(웹페이지 운영자들이 우클릭이 되는 것을.., 다른이름으로 저장되는 것을 꺼려하기에
각종 태그를 문의하는 것을 볼 수 있지만, 현재까지 그것을 현실적으로 제한하는 태그는 아직 없습니다)

600 과 338은 16:9 비율의 축소비율입니다.(1280x720)
동영상에 따라 다르지만, 축소비율(용량)은 플래시와 거의 차이나지 않지만..
많은 동영상을 인코딩해본 결과, 현재로써는 플래시가 같은화질 대비 용량이 더 적게 나옵니다.

*Animation GIF 용량 단점을 해결한 webm 미디어 파일이 대안으로 떠오르고 있습니다.
(용량이 과거 플래시만큼 줄어들면서도 화질은 매우 우수합니다)

*단, 현재 구글 드라이브의 "링크주소"를 통해 태그를 삽입/재생 할 수 없습니다.

링크주소의 확장자가 파일명.webm 일 경우는 재생이 되지만, 태그삽입주소인 "http.....구글/dAdkfnskbs"라는 식은 되지 않습니다.
(단순 웹주소를 복사 웹브라우저에서는 재생됨)

다음 링크를 통해 그 해결법을 알 수 있습니다.

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

*동영상 인코딩에 관한 잡담 하나.

빠른 동영상 인코딩/편집을 원하십니까?

시스탬 메모리(RAM)의 용량을 늘리고 멀티코어와 멀티 쓰레드가 많은 CPU를 선택하십시오.

고성능 비디오 카드의 품질과 동영상 편집/인코딩과는 직접적 관련성은 거의 없습니다.
(당신의 동영상 편집프로그램에서 동영상을 불러와 재생시 버벅이거나 싱크가 맞지 않는 느낌이 드는 것은,
비디오 카드의 성능이 아니라, 시스템 메모리(RAM) 용량이 작은 탓입니다)