웹 페이지에서 Webm 파일 재생하기

반응형

오늘 재미있는 움짤 (gif) 이미지들을 모아 놓은 사이트에 들어가 이미지 한장을 다운 받으려니

확장자 명이 webm으로 열리길래...검색해 보고 간단히 몇글자 적습니다.

크롬 기준으로 gif 이미지에 우 클릭하고 열린 메뉴 상자에서는 아래 샷처럼 움짤을 PC에 저장하거나

이미지 url를 복사해 <img src=이미지 URL 주소> 간단 태그로 웹에 gif 이미지를 올릴 수 있습니다.


gif 이미지


반면 webm 파일은 우 클릭하면 이미지가 아닌 동영상으로 표시되고 일반 이미지 태그로는 파일을 볼 수 없으며

HTML5가 지원되지 않는 웹 브라우저에서는 소스 코드를 사용해도 볼 수 없다고 합니다.



소스 코드를 사용한 webm 포맷


위 영상에 사용한 소스 코드는...

<video width="600" height="330" autoplay="1" loop="1">

<source src="https://i.imgur.com/FppikeV.webm" type="video/webm">

브라우저가 비디오 태그를 지원하지 않습니다 . 

</video>

이며 가로 x 세로 크기는 픽셀로 조절이 가능하고 빨간색으로 표시된 url은 자신이 업로드한 webm 확장 주소로 

대체하거나 온라인에서 복사한 주소로 대체하면 되구요.

소스 코드 복사 안 되는 분은 첨부된 텍스트 참조  Wemb 재생 소스 코드.txt

우 클릭 메뉴에서 컨트롤 표시에 체크하면 화면 하단에 플레이어가 나타나 정지 및 재생 조정을 할 수 있게 됩니다. 


또한 위 소스 코드는 HTML5가 지원하는 확장 포맷에 모두 적용될 듯 한데요.

실험한 포맷은 Mp4였는데, 비디오 및 오디오가 무리없이 재생되더군요.


재미있는 gif,webm 찾을 수 있는 사이트


반응형

댓글

Designed by JB FACTORY