| 웹 플레이어 만들기 (미디어 플레이어를 이용한 미니 플레이어 제작) |
|
접속자가 많으면 방송이 나오지 않을 수도 있습니다. |
1.웹 플레이어 제작 개요
인터넷 윈앰방송에서 필요한 다양한 웹플레이어 만들기 강좌중에서 이번 시간에는 첫 번째 시간으로
가장 쉽게 만들 수 있는 위와 같은 미디어 플레이어를 이용한 웹플레이어를 만들도록 하겠습니다.
처음에는 누구나 쉽게 따라 할 수 있도록 하기 위해서 복잡한 부분은 전혀 몰라도 할 수 있도록 하였습니다.
순서대로 잘 따라 하시면 누구나 쉽게 만들 수 있고 나중에는 다양한 기능의 플레이어를 만들 수 있습니다.
2.원본 프로그램 다운로드 받기
복잡한 부분은 모두 미리 만들어 놓았습니다.
따라서 프로그램을 내려받고 문구를 고치거나 그림을 바꾸거나 음악주소를 입력 하시면 만들 수 있습니다.
프로그램을 받으려면 이글의 맨위에 보시면 mini_player.exe (80 KB) 보이시죠? 클릭 하시면 받을 수 있습니다.
프로그램을 내려 받으셨다면 mini_player.exe 이런 파일을 보실수 있습니다.
더블클릭 하셔서 실행하면 여러개의 프로그램 소스가 나오는데 다음과 같습니다.
프로그램 파일 (7개)
serve_dll.php mini_player2.php play_base.php player.php player2.php mini_player.php serves_dll.php
그림 파일 (4개)
mini_player_org.jpg mini_player.jpg mini_left.jpg mini_right.jpg
미디어 파일 (1개)
play.asx
3.그림 파일의 용도 및 수정하기
그림 파일중에서 mini_player_org.jpg 이것은 원본 그림이며 아래와 같은 그림입니다.
위의 그림에 자신의 방송국 이니셜이나 로고등을 그림에 삽입 합니다. (예제 그림은 mini_player.jpg입니다)
위의 그림을 반으로 나누어서 두 조각으로 만들어서 사용하게 됨니다.
왼쪽 그림의 예제는 mini_left.jpg 이고 오른쪽 그림의 예제는 mini_right.jpg 입니다.
4.프로그램 소스 수정하기
이번에 제작하는 플레이어는 기초 시간으로 방송정보를 실시간 표시하는 것이 아니고 정해진 문구를 스크롤 하는
단순한 형태입니다.. 따라서 문구를 고치기만 하면 됨니다.(실시간 표시는 추후 강좌에서 설명 합니다)
스크롤되는 문구를 고치기 위해서 열어야 할 프로그램 파일은 player.php 와 player2.php 두 개의 파일입니다.
player.php 이파일은 플레이어가 나타날 때 자동으로 음악이 나오게 하는데 사용되고
player2.php 이파일은 플레이 버튼을 클릭 해야 방송이 나오는 용도로 사용되는 프로그램 파일입니다.
따라서 하나만 고치고 고친 부분을 복사해서 두파일을 똑같이 만들면 됨니다.
player.php 이파일을 워드패드를 이용해서 열어보면 소스 중간에 아래와 같은 내용이 보입니다.
<!------------------------ 여기서 부터 수정 하세요 -------------------------------------------->
<table border="0" cellpadding="0" cellspacing="0" width="278">
<tr>
<td width="160" background="mini_left.jpg" align="center" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" width="143">
<tr>
<td width="8"> </td>
<td width="135" align="center" valign="middle">
<marquee scrolldelay="1" scrollamount=1 width="135"><span style="font-size:9pt; color:white;">
인터넷 방송정보 공유 동호회 캐스트클럽 방송 입니다 ♬♬
</span><span style="color:#FFFFFF">.</span>
</marquee>
</td>
</tr>
</table>
</td>
<td width="118">
<p><img src="mini_right.jpg" width="119" height="24" border="0" usemap="#ImageMap1"></p>
</td>
</tr>
</table>
<!------------------------- 여기까지 입니다. ---------------------------------------------------->
위의 내용중에 고쳐야할 문구가 보이죠? "인터넷 방송정보 공유 동호회 캐스트클럽 방송 입니다 ♬♬" 이부분 입니다.
수정 하셨으면 저장 합니다.
player2.php 이파일도 워드패드로 열어서 같은 부분을 똑같이 수정 합니다.
player2.php 이파일은 위에서 설명한것 처럼 창이 열릴 때 자동으로 재생되는 것이 아니고 플레이 버튼을 눌렀을 때
재생을 시작하기 때문에 스크롤될 문자를 "플레이를 누르면 재생됨니다...." 이렇게 고쳐도 좋습니다.
6.자신의 방송주소 입력하기 (고정포트만 사용할 수 있습니다)
play.asx 파일을 워드패드로 열어보면 아래와 같은 내용이 보입니다.
<ASX version="3.0">
<entry>
<PARAM name="" value=""/>
<ref href = "http://art.inlive.co.kr:8000"/>
<Abstract>Loading...Broadcasting</abstract>
<Copyright>http://club.bada24.net</Copyright>
<Author>캐스트 클럽</author>
<Title>미니 플레이어</title>
</entry>
</ASX>
위의 내용중에서 http://art.inlive.co.kr:8000 이부분을 자신의 방송 주소로 수정 합니다.
수정이 되었으면 저장하고 워드패드를 닫습니다.
7.홈페이지에서 웹플레이어 사용하기
위의 모든 작업을 마친 파일을 자신의 홈페이지 계정에 업로드 합니다.
특정한 폴더를 만들어서 업로드 하면 관리를 쉽게 할 수 있습니다... 저는 mini_player1 라는 폴더를 만들었습니다.
홈페이지에 위와 같은 이름의 폴더를 만들고 업로드 했다면 웹플레이어 주소는 아래와 같습니다.
http://자신의주소/mini_player1/mini_player.php
실제로 동작이 되는지 확인을 해보겠습니다.. 아래의 주소를 클릭해 보세요
http://cast.bada24.net/club/mini_player1/mini_player.php (화면이 열리면서 자동으로 방송연결)
http://cast.bada24.net/club/mini_player1/mini_player2.php (화면이 열리고 플레이를 누르면 방송연결)
이제 웹 플레이어를 플레이어를 <iframe> 태그를 사용해서 자신의 홈페이지에 삽입 합니다.
홈페이지에 사용할 태그는 아래와 같습니다.
<iframe frameborder="0" marginwidth="0" marginheight="0" width="278" height="23" align="left" scrolling="no"
src="http://cast.bada24.net/club/mini_player1/mini_player.php"></iframe>
위의 태그에서 주소는 자신의 주소로 바꾸어야 하는건 아시죠?
이렇게 해서 화면위에서 보여드린 미디어 플레이어를 이용한 웹 플레이어를 만들어 보았습니다.
주의사항
미디어 플레이어에 기반하기 때문에 미디어 플레이어9 이상이 설치되어 있어야 합니다.
또한 방송주소는 고정된 주소만을 사용할 수 있습니다.
나중에 이어지는 강좌에서는 유동포트, 실시간 정보표시, 다양한 플레이어 등에 대한 부분을 올리겠습니다.