Chapter05 오디오와 비디오 HTML5 Programming
Contents Chapter05 1. 오디오와 비디오 재생하기 2. 오디오와 비디오 제어하기 오디오와 비디오
오디오와 비디오 재생하기 오디오와 비디오 재생하기 플러그인 Chapter05 오디오와 비디오 재생하기 이전에 웹 페이지에서 오디오나 비디오를 재생하기 위해서는 embed 요소나 object 요소를 사용하여 외부 플러그인인 플래시나 실버라이트 등을 불러와 사용하였음 하지만 HTML5의 등장으로 이제는 외부 플러그인 없이 멀티미디어 구현이 가능하게 되었음 플러그인 웹 브라우저에 없는 기능을 보완하기 위하여 설치하는 프로그램 독립적으로 실행되지 못하며 웹 브라우저와 함께 동작 오디오와 비디오
오디오 재생하기 오디오 재생하기 웹 페이지에 오디오를 삽입하기 위해서는 audio 요소를 사용 Chapter05 오디오 재생하기 웹 페이지에 오디오를 삽입하기 위해서는 audio 요소를 사용 audio 요소의 브라우저 지원 현황 audio 요소를 사용할 때에는 src 속성의 값을 지정해야 함. src 속성의 값으로는 재생할 오디오 파일의 URL이나 파일 경로를 지정 오디오와 비디오
오디오 재생하기 Chapter05 오디오 재생하기 오디오와 비디오
오디오 재생하기 embed 요소 플러그인을 사용하여 표시되는 데이터나 동영상을 웹 페이지에 삽입 Chapter05 오디오와 비디오
오디오 재생하기 Chapter05 audio 요소의 속성 오디오와 비디오
오디오 재생하기 Chapter05 audio 요소 audio 요소 가운데 control 속성과 autoplay 속성, loop 속성은 값을 따로 지정하지 않아도 같은 동작을 함 오디오와 비디오
오디오 재생하기 브라우저별 지원하는 오디오 포맷 각 브라우저마다 지원하는 오디오 파일 포맷이 각각 다름 Chapter05 오디오와 비디오
오디오 재생하기 source 요소 audio 요소와 vedio 요소의 자식 요소로써 src 속성의 역할을 대신하는 요소 Chapter05 source 요소 audio 요소와 vedio 요소의 자식 요소로써 src 속성의 역할을 대신하는 요소 src 속성은 하나의 값만 지정할 수 있는 반면, source 속성은 audio 요소 사이에 여러 개 지정할 수 있음 source 요소의 속성 오디오와 비디오
오디오 재생하기 Chapter05 source 요소 오디오와 비디오
프로그램 5-1 Chapter05 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 오디오 삽입하기 </title> 06: </head> 07: 08: <body> 09: <audio controls autoplay loop> 10: <source src="audio.mp3" type="audio/mpeg"></source> 11: <source src="audio.ogg" type="audio/ogg"></source> 12: <embed src="audio.wav"></embed> 13: </audio> 14: </body> 15: </html> 오디오와 비디오
비디오 재생하기 비디오 재생하기 비디오를 삽입하기 위해서는 video 요소를 사용 video 요소의 브라우저 지원 현황 Chapter05 비디오 재생하기 비디오를 삽입하기 위해서는 video 요소를 사용 video 요소의 브라우저 지원 현황 오디오와 비디오
비디오 재생하기 Chapter05 비디오 재생하기 오디오와 비디오
비디오 재생하기 Chapter05 video 요소의 속성 오디오와 비디오
비디오 재생하기 브라우저별 지원하는 비디오 포맷 Chapter05 브라우저별 지원하는 비디오 포맷 브라우저별로 지원하는 확장자가 다르기 때문에 비디오를 재생하기 위해서도 여러 개의 source 요소를 사용할 필요가 있음 코덱까지 지정해야 브라우저는 포함되어 있는 미디어를 재생할 수 있는지 정확하게 판단할 수 있음 오디오와 비디오
비디오 재생하기 Chapter05 코덱 지정 코덱을 지정하는 방법은 source 요소의 type 속성에 값을 추가. 타입 값 뒤에 세미콜론을 붙인 후 codecs=“코덱”이라는 형식으로 지정 오디오와 비디오
프로그램 5-2 Chapter05 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 비디오 삽입하기 </title> 06: </head> 07: 08: <body> 09: <video controls autoplay width="700" height="500"> 10: <source src="video.mp4" 11: type="video/mp4; codecs="avc1.4D401E, mp4a40.2""></source> 12: <source src="video.ogg" 13: type="video/ogg; codecs="theora, vorbis""></source> 14: <embed src="video.wav"></embed> 15: </video> 16: </body> 17: </html> 오디오와 비디오
오디오와 비디오 제어하기 Chapter05 재생 제어하기 미디어 파일 제어를 위한 메서드나 속성은 오디오 파일이나 비디오 파일이나 사용 방법이 모두 동일함 미디어 파일 제어와 관련된 메서드 오디오와 비디오
오디오와 비디오 제어하기 Chapter05 재생 제어하기 오디오와 비디오
오디오와 비디오 제어하기 Chapter05 재생 제어하기 미디어 파일 제어 및 상태에 관련된 속성 오디오와 비디오
오디오와 비디오 제어하기 Chapter05 재생 제어하기 오디오와 비디오
프로그램 5-3 Chapter05 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 비디오 제어하기 </title> 06: </head> 07: 08: <body> 09: <video id="videoplay" controls width="500" height="300"> 10: <source src="video.mp4" 11: type="video/mp4; codecs="avc1.4D401E, mp4a40.2""></source> 12: <source src="video.ogg" 13: type="video/ogg; codecs="theora, vorbis""></source> 14: <embed src="video.wav"></embed> 15: </video> 16: <br> 17: <input type="button" value="재생/일시정지" onclick="play();"> 18: <input type="button" value="큰화면" onclick="big();"> 19: <input type="button" value="작은화면" onclick="small();"> 20: 21: <script type="text/javascript"> 22: var videocontrol = document.getElementById("videoplay"); 23: 24: function play() 25: { 26: if (videocontrol.paused) 27: videocontrol.play(); 28: else 29: videocontrol.pause(); 30: } 오디오와 비디오
프로그램 5-3 Chapter05 32: function big() 33: { 33: { 34: videocontrol.width += 200; 35: videocontrol.height += 200; 36: } 37: 38: function small() 39: { 40: videocontrol.width -= 200; 41: videocontrol.height -= 200; 42: } 43: </script> 44: </body> 45: </html> 오디오와 비디오
이벤트 처리하기 Chapter05 이벤트 처리하기 미디어와 관련된 주요 이벤트 오디오와 비디오
이벤트 처리하기 이벤트 처리하기 이벤트는 addEventListener() 메서드를 사용하여 등록 Chapter05 이벤트 처리하기 이벤트는 addEventListener() 메서드를 사용하여 등록 addEventListener() 메서드 내부에 함수를 정의하여 발생하는 이벤트에 따라 실행할 내용을 정의 오디오와 비디오
프로그램 5-4 Chapter05 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 비디오 제어하기 </title> 06: </head> 07: <body> 08: <video id="videoplay" controls width="500" height="300"> 09: <source src="video.mp4" type="video/mp4; 10: codecs="avc1.4D401E, mp4a40.2""></source> 11: <source src="video.ogg" type="video/ogg; 12: codecs="theora, vorbis""></source> 13: <embed src="video.wav"></embed> 14: </video> 15: <br> 16: <div id="playtime"></div> 17: 18: <script type="text/javascript"> 19: var videocontrol = document.getElementById("videoplay"); 20: 21: videocontrol.addEventListener("timeupdate", PlayTime, false); 22: videocontrol.addEventListener("ended", PlayEnd, false); 23: 오디오와 비디오
프로그램 5-3 Chapter05 24: function PlayTime(e) 25: { 25: { 26: document.getElementById("playtime").innerHTML = 27: "재생 상태 : " + Math.floor(videocontrol.currentTime) + 28: "/" + Math.floor(videocontrol.duration); 29: } 30: 31: function PlayEnd(e) 32: { 33: alert("미디어 재생이 완료되었습니다."); 34: } 35: </script> 36: </body> 37: </html> 오디오와 비디오