http://www.flickr.com/photos/florisla/1943594953/

WebM 프로젝트는 누구나 자유롭게 사용할 수 있는 고품질의 오픈된 웹 비디오 포맷을 개발합니다.
모질라, 구글, 오페라를 비롯한 40여개 이상의 컨텐츠 배포자, 소프트웨어 및 하드웨어 제작사들이 WebM을 지원합니다.
WebM은 웹을 위한 오픈 소스의 로열티가 없는 미디어 포맷입니다.
WebM은 파일 컨테이너 구조와 비디오, 오디오 포맷을 정의합니다. WebM 파일은 VP8 비디오 코덱을 사용한 압축된 비디오 스트림과 Vorbis 오디오 코덱을 사용한 압축된 오디오 스트림으로 구성됩니다. WebM 파일 구조는 Matroka 컨테이너를 기반으로 합니다.

구글이 I/O 에서 다수의 파트너들(브라우저에서는 오페라와 모질라가 참여)과 함께 새로운 WebM 프로젝트를 공개했습니다. WebM 프로젝트는 구글이 인수했던 On2의 코덱을 사용합니다. 이 발표는 개방형 비디오 전쟁에 있어 큰 뉴스이며, 이제 모두의 눈은 사파리로 향하게 되었습니다.

Jacob Seidelin 씨가 Flash를 사용하지 않고 순수 JavaScript로만 동영상 플레이어를 만들었다고 합니다: 처음엔 바이너리 파일을 바로 읽을까 하다가 마음을 바꿔먹고 생각해낸 것이 JSON 포맷으로 비디오를 표시하는 JSONVid 였다고 합니다.

아래 포맷을 보면 이해하시겠지만, 프레임 한장 한장을 base64 형태의 데이터로 내보낸 것입니다! (Crazy! 라는 말이 저절로 나와요):

[code:JScript]
{
  frm : "JSVID",   // format id tag
  ver : 1,  // version number of format
  width : 320,  // width of video
  height : 240,  // height of video
  rate : 15,  // framerate (frames per second)
  frames : 495,  // number of frames in file
  data : {
    video : [ // here comes 495 data:uris containing base64 encoded jpeg image frames
      "https://t1.daumcdn.net/cfile/tistory/2550BE4256E6943610",
      "https://t1.daumcdn.net/cfile/tistory/2647263C56E6943631",
      ...
    ]
  }
}

처음에는 각각의 프레임을 이미지 객체로 만들어서 캔버스 엘리먼트에 drawImage()를 이용해 렌더링하려고 했습니다. 잘 동작했고, 성능도 좋았지만(Opera에서는 CPU를 과하게 사용하긴 했습니다만), 보통의 이미지 태그만을 사용해서 각 프레임별 data:uri를 src 속성을 통해 바꿔주기만 하면 되겠다라고 생각했습니다. 변화는 Firefox와 Safari에서는 겨우 알아챌 수 있을 정도였고, Opera에서는 다소 나아져서 작동되었습니다. 그래서, 저는 캔버스를 버리고보통의 이미지들만 사용했습니다.

이제는, 똑같은 이미지 태그에 data:uri 만 변경하는 것을 계속하면 Firefox가 메모리를 다 잡아 먹을 것처럼 보였습니다. 그래서, 각각의 프레임마다 다음 프레임을 위한 새로운 이미지 객체를 만들고 저장해두었습니다. 동영상이 재생됨에 따라, 이전 프레임 이미지는 새로운 이미지 객체로 대체되었습니다. 이것은 잘 동작하는 것 같았지만 재생 전에 매번 이미지 객체를 생성하는 만큼 짜증스러운 딜레이가 생겼습니다. 그래서 결국 이미지 생성을 실제 렌더링 주기로 옮겨서 프레임 이미지가 이미 생성되어있는지 확인하고 없는 경우에만 새로 만들도록 했습니다.

이렇게 사용하면 된다고 합니다:

from JSONVid: Pure JavaScript Video Player on Ajaxian