💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #20 - Multimedia ( 멀티미디어, 음악, 동영상 )

JavaScript의 navigator 객체는 plugins 객체를 자식으로 갖고 있습니다. 이 객체는 배열의 구조를 가지고 있는데 브라우저에 설치되어있는 플러그인마다 각각 하나의 엔트리 포인트를 가지고 있습니다. navigator.plugins 객체는 Netscape, Firefox 그리고 Mozilla 에서만 지원합니다.

아래 예제는 브라우저에 설치되어있는 플러그인들의 목록을 모두 출력하는 예제입니다.

<html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<table border="1">
<tr>
    <th>Plug-in Name</th>
    <th>Filename</th>
    <th>Description</th>
</tr>
<script language="JavaScript" type="text/javascript">
for (i=0; i<navigator.plugins.length; i++) {
   document.write("<tr><td>");
   document.write(navigator.plugins[i].name);
   document.write("</td><td>");
   document.write(navigator.plugins[i].filename);
   document.write("</td><td>");
   document.write(navigator.plugins[i].description);
   document.write("</td></tr>");
}
</script>
</table>
</body>
</html>

플러그인 검사

각 플러그인은 배열에 하나의 엔트리를 가지고 있습니다. 각 엔트리는 다음과 같은 속성을 가지고 있습니다.

name - is the name of the plug-in.
filename - is the executable file that was loaded to install the plug-in.
description - is a description of the plug-in, supplied by the developer.
mimeTypes - is an array with one entry for each MIME type supported by the plug-in.

아래 예제를 한번 보실까요?

<html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
media = navigator.mimeTypes["video/quicktime"];
if (media){
  document.write("<embed src='quick.mov' height=100 width=100>");
}
else{
  document.write("<img src='quick.gif' height=100 width=100>");
}
</script>
</body>
</html>

video/quiktime 플러그인이 설치되어있는지를 검사한 뒤, 설치가 되어있으면 quick.mov를 embed하여 플레이 시킬 수 있도록 하였고 설치가 되어있지 않으면 quick.gif라는 이미지 파일을 보여주도록 하는 예제입니다.

멀티미디어 다루기

대부분의 브라우저에서 동작하는 예제를 한번 보도록 할 까요???

<html>
<head>
<title>Using Embeded Object</title>
<script type="text/javascript">
<!--
function play()
{
  if (!document.demo.IsPlaying()){
    document.demo.Play();
  }
}
function stop()
{
  if (document.demo.IsPlaying()){
    document.demo.StopPlay();
  }
}
function rewind()
{
  if (document.demo.IsPlaying()){
    document.demo.StopPlay();
  }
  document.demo.Rewind();
}
//-->
</script>
</head>
<body>
<embed id="demo" name="demo"
    src="http://www.amrood.com/games/kumite.swf"
    width="318" height="300" play="false" loop="false"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    swliveconnect="true">
</embed>
<form name="form" id="form" action="#" method="get">
<input type="button" value="Start" onclick="play();" />
<input type="button" value="Stop" onclick="stop();" />
<input type="button" value="Rewind" onclick="rewind();" />
</form>
</body>
</html>

위 예제는

http://www.amrood.com/games/kumite.swf 파일을 로딩해서 화면에 보여주는데,
Start버튼을 누르면 kumite.swf파일이 실행이 되면서 플래쉬게임이 진행이 되야 하는데,
제 브라우저에서는 동작을 안하네요? ㅋㅋ 왜 안되는지 이유를 밝혀서 올리도록 하겠습니다. ㅋㅋ 
(embed태그의 play옵션을 true로 주면 실행이 되는데 아마 자바스크립트에서 실행하는 방법이 
예제에 나와있는 것과 달라진것이 아닌가 싶네요.)

--------------------------

swf파일 실행시키는 거 한참 찾아봤는데도 잘 모르겠네요. UI쪽은 역시 힘들군요...아흑....

아시는 분 계시면 댓글좀 남겨주세요 ㅠㅠ

Reference : http://www.tutorialspoint.com/javascript/javascript_multimedia.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #22 - Image Map ( 이미지 맵 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #21 - Navigator ( 브라우저 판별/구분하기 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #19 - Animation ( 애니메이션 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #18 - Validation ( 유효성 검사 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #17 - Error Handling ( 예외 처리 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #20 - Multimedia ( 멀티미디어, 음악, 동영상 )

플러그인 검사

멀티미디어 다루기

'💻 Programming > Javascript' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바