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

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

[code:Xml]
<html>
<head>
<script src="jsvideo.js" type="text/javascript"></script>
</head>
<body>
<div videosrc="myvideo.jsvid" videoautoplay="true"></div>
</body>
</html>

직접 테스트를 해보실 수도 있습니다(test1, test2). 하지만 여전히 Flash가 동영상에 있어서 최선의 방법인 것은 사실인 것 같습니다.

from JSONVid: Pure JavaScript Video Player on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요