[컴][웹] 브라우저에서 webm 을 play 하기

webm 을 play 하기 위한 html 소스

요새 움짤 같은 형식으로 서비스를 하는 곳이 많이 보인다. 특히 외국 사이트들이, 그리고 apple 도 live photo 같은 것을 내놓기도 했고.

여하튼 그래서 보니 html 에서 webm 을 지원한다. webm 에 대한 설명은 ref.1 을 참고하자.

여기서는 간단하게 tag 로 browser 에서 사용하는 법을 보자. 아래소스는 gfycat.com 의 소스를 가져왔다.

<video id="gfyVid1" class="gfyVid" width="" height="" autoplay loop muted="muted"  poster='http://thumbs.gfycat.com/AdoredEducatedGermanspaniel-poster.jpg'>

    <source id="webmsource" src="http://fat.gfycat.com/AdoredEducatedGermanspaniel.webm" type="video/webm">
    <source id="mp4source" src="http://fat.gfycat.com/AdoredEducatedGermanspaniel.mp4" type="video/mp4">
    Sorry, you don't have HTML5 video and we didn't catch this properly in javascript.  
    You can try to view the gif directly: <a href="http://giant.gfycat.com/AdoredEducatedGermanspaniel.gif">http://giant.gfycat.com/AdoredEducatedGermanspaniel.gif</a>. 
</video>

Reference

1. WebM - 위키백과, 우리 모두의 백과사전