 | 난이도 : 중급 Jack D Herrington, Senior Software Engineer, Leverage Software Inc.
2007 년 12 월 18 일 광대역, 미디어, 영화, 이미지, 사운드 드라이브는 Web 2.0에 일대 혁신을 가져왔습니다. 미디어에 PHP와 Asynchronous JavaScript™ + XML (ajax) 기술을 결합하는 방법을 배워봅시다.
웹
애플리케이션의 새로운 조류를 가장 잘 드러내는 사이트가 무엇이냐고 묻는다면, 대부분 YouTube라고 대답할 것이다. 이
사이트는 뚜렷한 방식으로 신 기술을 채택했을 뿐만 아니라, 우리가 미디어를 보는 방식과 미디어와의 관계를 변화시킨 사이트라고 할
수 있다. 주요 이야기들이 기존의 전통적인 미디어에 나타나기 전에 YouTube에서 발생하고, 그렇지 않을 때에는,
YouTube는 하나의 큰 TiVo처럼 작동한다.
미디어 공유는 세상을 변화시키고 있고, 기술적 관점에서 볼 때 그리 어려운 일은 아니다. 이 글에서는 간단한 웹 비디오 호스팅 애플리케이션에 ajax 프론트엔드를 추가하는 방법을 설명한다.
비디오 선택
영화 리스트를 저장하고, 그 리스트를 사용하여 여러 영화들 중에서 하나를 선택할 수 있는 웹 사이트로 시작한다. 이 사이트에서는 한 페이지에서 다른 페이지로 이동하지 않고 영화를 바꿀 수 있다. Listing 1은 페이지의 코드이다.
Listing 1. index.html
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<div id="movieHost">
</div>
<div id="movieList">
</div>
<script>
function setMovie( url )
{
$('movieHost').innerHTML = '';
var elEmbed = document.createElement( 'embed' );
elEmbed.src = url;
$('movieHost').appendChild( elEmbed );
}
new ajax.Request( 'movies.xml', {
method: 'get',
onSuccess: function( transport ) {
var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
$('movieList').innerHTML = '';
var bFirst = true;
for( var b = 0; b < movieTags.length; b++ ) {
var url = movieTags[b].getAttribute('url');
var title = movieTags[b].getAttribute('title');
if ( bFirst )
{
setMovie( url );
bFirst = false;
}
var html = '<a href="javascript:void setMovie(\''+url+'\');">';
html += title+'</a><br/>';
$('movieList').innerHTML += html;
}
}
} );
</script>
</body>
</html>
|
이 페이지는 탁월한 Prototype.js JavaScript 라이브러리를 사용하여 movies.xml 데이터 소스의 ajax 요청을 만든다. 데이터가 리턴되면, 이 코드는 getElementsByTagName()
메소드를 사용하여 모든 영화 태그들을 찾는다. 그리고 나서, 각 영화 태그의 경우, 이 코드는 URL과 제목을 가져온다. 검색된
태그가 리스트의 첫 번째 영화라면, 스크립트는 그 영화를 바로 상영하기 시작한다. 그렇지 않으면, 앵커 태그를 추가하는데,
이것은 movieList <div> 태그에 대한 영화 셀렉터로서 작동한다.
이 영화 셀렉터 앵커는 setMovie() 함수를 호출하여 특정 영화를 시작한다. 영화를 시작하기 위해서는, movieHost <div> 태그의 콘텐트를 비어있는(empty)로 설정하는데, 이렇게 되면 이전의 영화를 지운다. 그리고 나서, 콘텐트를 <embed> 태그로 설정하는데, 이것의 URL은 영화 리스트에 의해 지정된다.
<embed> 태그는 영화를 페이지로 가져올 수 있는 가장 간단한 방법이지만, 브라우저들 간 문제가 있을 수 있다. 또 다른 옵션은 <object>와 <embed> 태그를 사용하는 것이다. (또 한 가지 방법은 Macromedia Flash Player를 사용하는 방법이다. 이 글 후반에 설명하겠다.)
이 예제에서, movies.xml 파일은 필자의 가정용 영화에 대한 레퍼런스가 있는 파일일 뿐이다. Listing 2는 파일 모습이다.
Listing 2. movies.xml
<movies>
<movie url="spider.mov" title="Spider" />
<movie url="swing.mov" title="Swing Set" />
<movie url="water.mov" title="Water Splash" />
</movies>
|
이 페이지를 검색하면 그림 1과 같은 모습을 볼 수 있다.
그림 1. 간단한 영화 리스트 페이지
;' color='#ffff00' size='4'>ajax</font>xml7/index_400_304.jpg)
영화는 페이지 맨 위에 있고, <embed> 태그에 의해 재생되며, 그 아래에는 볼 수 있는 영화 리스트들이 나타난다. 이 링크들 중 하나를 클릭하면, 영화는 필자가 클릭한 것으로 바뀐다.
이 시스템은 큰 비디오 저장소로 잘 확장되지 않기 때문에, 이 영화 리스트에서 검색을 수행할 수 있는 방법이 필요하다.
검색 가능한 영화 리스트
검색 기능을 추가하려면, 검색 박스를 추가해야 하는데, Listing 3에 나타나 있다. 또한 q라고 하는 검색 인풋 필드도 추가했다.
Listing 3. 검색 기능 추가하기
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table><tr><td valign="top">
<input type="text" id="q" onkeyup="search()">
<div id="movieList">
</div>
</td><td valign="top">
<div id="movieHost">
</div>
</td>
</tr></table>
<script>
function setMovie( url )
{
$('movieHost').innerHTML = '';
var elEmbed = document.createElement( 'embed' );
elEmbed.src = url;
$('movieHost').appendChild( elEmbed );
}
function search()
{
new ajax.Request( 'search.php?q='+escape($('q').value), {
method: 'get',
onSuccess: function( transport ) {
var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
$('movieList').innerHTML = '';
var bFirst = true;
for( var b = 0; b < movieTags.length; b++ ) {
var url = movieTags[b].getAttribute('url');
var title = movieTags[b].getAttribute('title');
if ( bFirst )
{
setMovie( url );
bFirst = false;
}
var html = '<a href="javascript:void setMovie(\''+url+'\');">';
html += title+'</a><br/>';
$('movieList').innerHTML += html;
}
}
} );
}
</script>
</body>
</html>
|
key-up 이벤트 시, search() 메소드가 호출되도록 설정했다. 이 search() 메소드는 ajax.Request 호출과 비슷한데, 쿼리 스트링을 search.php라고 하는 페이지로 전달한다는 점만 다르다. search.php 스크립트는 원본과 같은 XML 포맷을 리턴하기 때문에, XML 파싱을 수행하는 코드는 바꿀 필요가 없다.
key-up에 대한 search() 함수가 너무 반응적이라는 것을 인정한다. 이상적으로는, 이 시스템은 검색을 실행하기 전에 1초 정도 기다려서, 리스트 깜빡임(flicker) 없이 완전한 검색 텍스트를 완료할 수 있어야 한다. window.setTimeout() 메소드를 사용하여 이와 같은 작동을 쉽게 구현할 수 있다.
Listing 4는 수정된 search.php 스크립트이다.
Listing 4. search.php
<?php
header( 'content-type: text/xml' );
$movies = array();
$movies['spider.mov'] = 'Spider';
$movies['swing.mov'] = 'Swing Set';
$movies['water.mov'] = 'Water Splash';
?>
<movies>
<?php
foreach( $movies as $k => $v ) {
if ( strlen( $_GET['q'] ) > 0 &&
preg_match( '/'.$_GET['q'].'/i', $v ) ) {
?>
<movie url="<?php echo($k) ?>" title="<?php echo($v) ?>" />
<?php
} }
?>
</movies>
|
스크립트 위에, 모든 영화들을 보유하고 있는 어레이를 만든다. 단순하게 하기 위해, 영화들을 하드 코딩 했다. 하지만 실제로는, 이러한 엘리먼트들은 영화 리스팅의 데이터베이스에서 올 수 있다.
이 코드는 리스트를 반복하고, 각 영화 제목에 대해 검색 쿼리에 정규식을 사용한다. 매치가 되면, <movie> 태그는 URL과 이름을 가진 아웃풋이다.
페이지를 시작하고 s를 타이핑 하면, 그림 2와 같은 페이지를 볼 수 있다.
그림 2. 간단한 쿼리를 사용한 영화 쿼리
;' color='#ffff00' size='4'>ajax</font>xml7/index2_1_400_299.jpg)
Delete를 누르고 water를 치면, 그림 3과 같은 페이지 모습이 보인다.
그림 3. "water" 영화를 찾는 영화 쿼리 페이지
;' color='#ffff00' size='4'>ajax</font>xml7/index2_2_400_297.jpg)
이 글의 주제는 Dynamic HTML (DHTML)과 ajax를 사용하여 프론트엔드를 만드는 방법을 설명하는 것이지만, 비디오 공유 사이트를 만들 수 있는 방법은 훨씬 더 많이 있다.
비디오 공유 기초
잠시 동안만, 이론적인 부분으로 넘어가서, 더 많은 트릭이 있는 비디오 공유 문제를 핸들하는 방법에 대해 이야기 해보자. 세 가지 주요한 문제가 있다:
- 비디오를 저장하고 스트리밍 하는 방법
- 다른 비디오 포맷들을 핸들하는 방법
- 업로드 된 파일에서 썸네일 이미지와 비디오 정보를 얻는 방법
비
디오 스토리지는 정말 문제이다. — 작은 애플리케이션일 경우 특히 그렇다. 비디오 파일은 크기 때문에, 비싼 하드웨어가
필요하다. 고객과 연결되기 위해서 대역폭 비용도 많이 든다. 장비를 구매하거나, 호스팅 장치에 두어야 한다. 아니면,
Amazon의 S3 같은 서비스를 사용할 수 있는데, 여기에서 자료(데이터베이스 백업, 이미지, 영화)를 업로드 하고, 합리적인
비용으로 Amazon 데이터 센터에서 공급 받을 수 있다. 데이터 센터에 돈을 들이기 전에 이러한 서비스를 모색하는 것도 좋은
방법이다.
다음 문제 — 비디오 포맷 — 는 흥미로운 도전 거리이다. 많은 비디오
포맷들이 있지만, 모든 플레이어들이 모든 포맷들을 핸들하는 것은 아니다. 사실, 대부분의 플레이어들은 자신들이 선택한 비디오
포맷만 핸들한다. 고객의 편의를 도모하기 위해, 특정 포맷으로 표준화 하고, 모든 인커밍 비디오를 이 포맷으로 변환할 수 있다.
이를 수행하는 한 가지 툴이 FFmpeg.이라고 하는 명령행 애플리케이션이다. 하나의 비디오 포맷을 또 다른 것으로 변환하는 것뿐만 아니라, 프레임 스냅샷을 찍어서 고객이 이것을 보기 전에 비디오 썸네일을 제공한다.
어떤 비디오 포맷을 표준화 할 것인가를 선택하는 것은
것은 복잡한 문제이다. Flash 비디오가 당장은 유력한 후보 같지만, Windows Media® 릴리스, 특히
Microsoft Silverlight (전, WPF/Everywhere)도 지지를 받고 있다. FFmpeg은 거의 어떤 영화도
Flash 비디오 포맷으로 내보낼 수 있고 매력적이다. 여러분의 사이트에 쉽게 삽입할 수 있는 무료의 오픈 소스 Flash 영화
플레이어들이 여럿 있다. 이러한 플레이어들을 위 코드와 결합하여 ajax 프론트엔드로 완벽한 엔드투엔드 비디오 공유 솔루션을
만들 수 있다.
비디오만 중요한 것이 아니다. 이미지 공유도 중요하다.
슬라이드 쇼
Listing 5는 XML 파일에서 데이터를 가져오는 DHTML 기반 슬라이드 쇼이다.
Listing 5. index.html
<html>
<head>
<script src="prototype.js"></script>
</head>
<body bgcolor="black">
<div style="text-align:center;">
<img id="imgItem" src="" style="display:none;"><br>
<div id="imgTitle" style="color:white;font-family:arial;font-size:24pt;">
</div>
</div>
<script>
var g_images = [];
var g_slideIndex = 0;
function showSlide()
{
$('imgTitle').hide();
$('imgItem').hide();
var height = 600;
var width = ( height / g_images[ g_slideIndex ].height ) *
g_images[ g_slideIndex ].width;
$('imgItem').src = g_images[ g_slideIndex ].src;
$('imgItem').width = width;
$('imgItem').height = height;
$('imgTitle').innerHTML = g_images[ g_slideIndex ].title;
$('imgTitle').show();
$('imgItem').show();
g_slideIndex++;
if ( g_slideIndex >= g_images.length )
g_slideIndex = 0;
}
new ajax.Request( 'images.xml', {
method: 'get',
onSuccess: function( transport ) {
var imageTags = transport.responseXML.getElementsByTagName( 'image' );
for( var b = 0; b < imageTags.length; b++ ) {
g_images.push( {
src: imageTags[b].getAttribute('src'),
title: imageTags[b].getAttribute('title'),
width: imageTags[b].getAttribute('width'),
height: imageTags[b].getAttribute('height')
} );
}
showSlide();
window.setInterval( showSlide, 5000 );
}
} );
</script>
</body>
</html>
|
이 코드는 Prototype.js JavaScript 라이브러리를 기반으로 하고 있다. ajax.Request 객체를 사용하여 보여줄 이미지 리스트를 가져온다. 리턴된 XML 코드는 파싱되어 각 이미지의 URL과, 넓이, 높이, 제목을 보여준다. showSlide() 함수가 호출되어 슬라이드 쇼를 실행한다. 타이머는 5초로 설정되어 쇼를 다음 슬라이드로 이동한다.
이 슬라이드 쇼는 현재 이미지에는 한 개의 <image> 태그를, 제목에는 한 개의 <div> 태그를 갖는다. 슬라이드 쇼는 현재 이미지와 제목을 숨기고, 이미지의 소스와 제목의 텍스트를 새로운 슬라이드 콘텐트로 설정한 다음, 이를 보여준다. 페이딩 효과를 원한다면, Scriptaculous 라이브러리의 Effects 클래스를 사용할 것을 권한다. 이것은 Prototype.js 기반이다.
Listing 6은 데이터 이미지 파일이다.
Listing 6. images.xml
<images>
<image src="images/megan1_875_700.jpg" title="Megan" width="875" height="700" />
<image src="images/oso1_875_700.jpg" title="Oso 1" width="875" height="700" />
<image src="images/oso2_873_700.jpg" title="Oso 2" width="873" height="700" />
</images>
|
이것은 하드 코딩 되었지만, PHP 스크립트를 사용하여 XML 코드를 쉽게 생성할 수 있다. 이 슬라이드 쇼는 그림 4와 같다.
그림 4. 간단한 슬라이드 쇼
;' color='#ffff00' size='4'>ajax</font>xml7/slideshow_400_333.jpg)
주: 필자는 이전에 훨씬 더 정교한 버전의 슬라이드 쇼를 공개했다. (참고자료). 이것은 Prototype.js 라이브러리를 사용하고 슬라이드 간 이동이 훨씬 더 단순하다는 점이 다르다.
결론
Flikr
와 YouTube 같은 사이트는 웹의 미디어의 무한한 잠재력의 극히 일부에 지나지 않는다. 이 글에서는 여러분의 프로젝트에
사용할 수 있는 비디오 및 이미지 구현을 설명했다. 이 글을 통해 효과를 거두었다면 developerWorks ajax 포럼(참고자료)에서 여러분의 성공 스토리를 들려주기 바란다.
다운로드 하십시오 | 설명 | 이름 | 크기 | 다운로드 방식 |
|---|
| 샘플 코드 | x-ajaxxml7-media.zip | 1090KB | HTTP |
|---|
참고자료 교육
토론
필자소개 |
