5-2. html5 multimedia

www.javaspecialist.co.kr

Video & Audio
동영상과 사운드파일을 재생시킨다.

Video Video 요소의 속성
Audio 요소의 속성
Audio
비디오 재생
track 요소
Video/Audio DOM 객체
속성 메서드 이벤트
Lab 2 - 비디오 제어하기 - 구간이동
Lab 1 - 비디오 제어하기

1. Video 요소
• Video on the Web
– 웹페이지에 비디오 파일을 나타내는 표준이 없음.
– 플래시 등 플러그인을 통해 동영상을 나타내지만 모든 브라우저(특히 휴대기기(iPhone,
Android))에서 지원하는 것은 아님.
– video 요소를 통해 비디오를 포함하기 위한 표준을 제공
• Video 포맷
– Ogg = Ogg 파일, Theora video codec/Vorbis audio codec
– MPEG4 = MPEG 4 파일, H.264 video codec/AAC audio codec
– WebM = WebM 파일, VP8 video codec/Vorbis audio codec
• 사용법
– <video src="movie.ogg" controls="controls">
</video>

2. Video 요소의 속성
속성 값 설명
src URL 비디오 파일의 URL
poster URL 비디오 포스터 파일의 URL
controls controls 플레이 버튼 등 비디오 제어 버튼 표시
audio muted 오디오 디폴트 상태, 현재 "muted" 만 가능
autoplay autoplay 비디오가 준비되면 즉시 시작하도록 함
preload
auto
metadata
none
페이지가 로드 되면 비디오 플레이를 위해 동영상 파일을 미리 로드 해 놓도록
함. autoplay인 경우 무시됨
height pixels 비디오 플레이어의 높이
width pixels 비디오 플레이어의 넓이
loop loop 비디오가 플레이 된 후 다시 처음부터 플레이 하도록 함

3. Audio 요소 및 Audio 요소의 속성
• Audio on the Web
– 웹페이지에서 오디오파일을 재생시키기 위한 표준이 없음.
– 모든 브라우저가 플러그인(플래시 등)을 지원하지 않음.
– audio 요소를 통해 오디오파일을 포함시키기 위한 표준을 제공.
– audio 요소는 사운드 파일 또는 오디오 스트림을 플레이 가능.
• Audio 포멧
– Ogg Vorbis
– MP3
– Wav
• 사용법
– <audio src="song.ogg" controls="controls">
</audio>
• 속성
속성 값 설명
src URL 비디오 파일의 URL
controls controls 플레이 버튼 등 비디오 제어 버튼 표시
autoplay autoplay 비디오가 준비되면 즉시 시작하도록 함
loop loop 비디오가 플레이 된 후 다시 처음부터 플레이 하도록 함
preload
auto
preload
none
페이지가 로드 되면 비디오 플레이를 위해 동영상 파일을 미리 로드 해
놓도록 함. autoplay인 경우 무시됨

4. 비디오 재생
• 비디오 재생
– 예)
• <video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
• source 요소 사용
– 브라우저가 지원하는 미디어 형식의 URL을 재생하도록 함
– 속성
• src : 미디어 URL
• type : 미디어 MIME 타입, 비디오와 오디오 코덱의 버전을 지정 가능
– type=‘video/mp4; codecs="mp4v20.240, mp4a.40.2"’
• media : 미디어 쿼리 지정
– 예)
• <video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

5. track 요소
• track 요소
– video 요소안에 포함되어 캡션/챕터/설명/메타정보/서브타이들 등을 표현할 수 있다.
– 2013.9월 IE10, Opera, Chrome 브라우저만 지원하고 있다.
– 자막파일은 Webvtt(.vtt) 형식임(http://dev.w3.org/html5/webvtt/)
• srt->vtt 자막파일 변환 사이트 : http://atelier.u-sub.net/srt2vtt/
– 예)
• <track src="subtitles_no.vtt" kind="subtitles" srclang="ko" label="Korean" default>
• <track src="subtitles_no.vtt" kind="subtitles" srclang="en" label="English">
• track 요소의 속성들
속성 값 설명
default default
트랙을 여러 개 포함하고 있을 경우 디폴트로 사용할 트랙을 지정
한다.
kind
captions
텍스트 트랙의 종류 지정한다.
chapters
descriptions
metadata
subtitles
label text 텍스트 트랙의 제목을 지정한다.
src URL 필수 속성이며, 트랙 파일의 경로를 지정한다.
srclang language_code
kind 속성의 값이 subtitles일 때 사용하며 트랙 데이터의 언어를 지
정한다. 언어 코드는 다음 주소를 참고하자.
http://www.w3schools.com/tags/ref_language_codes.asp
Cross-Origin Resource
Sharing 정책을 따름
(반드시 서버에서 실행되
어야 한다)

6. Video/Audio DOM 객체 (1/3) - 메서드
• Video/Audio DOM 객체의 메서드
• HTML Audio/Video DOM 객체의 속성, 메서드, 이벤트가 계속 추가되고 있는 상황이다. 브라
우저마다 속성 및 메서드를 지원하는 정도가 다를 수 있다.
– 예를 들면 defaultPlaybackRate 속성을 이용하면 플레이 속도를 변경할 수 있지만 2013년
5월에는 IE10과 Chrome 브라우저만 지원하고 있다.(1.0은 normal, 0.5는 half
speed(slower), 2.0은 double speed(faster), -1.0은 backwards, normal speed, -0.5는
backward, half speed)
• 참고(HTML Audio/Video DOM Reference)
– http://www.w3schools.com/tags/ref_av_dom.asp
메서드 설명
addTextTrack() 오디오/비디오에 새로운 트랙을 추가한다.
canPlayType() 브라우저가 플레이 시킬 수 있는 오디오/비디오의 타입을 체크한다.
load() 오디오/비디오 요소를 다시 로드한다.
play() 오디오/비디오를 플레이 시킨다.
pause() 현재 플레이 되고 있는 오디오/비디오를 일시 중지 시킨다.
Video/Audio DOM 객체의 속성, 메
서드, 이벤트를 이용하면 자바스크
립트로 비디오/오디오 요소를 제어
할 수 있다.

6. Video/Audio DOM 객체 (2/3) - 속성(1/2)
속성 설명
audioTracks Returns an AudioTrackList object representing available audio tracks
autoplay Sets or returns if the audio/video should start playing as soon as it is loaded
buffered Returns a TimeRanges object representing the buffered parts of the audio/video
controller
Returns the MediaController object representing the current media controller of the a
udio/video
controls Sets or returns if the audio/video should display controls (like play/pause etc.)
crossOrigin Sets or returns the CORS settings of the audio/video
currentSrc Returns the URL of the current audio/video
currentTime Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted Sets or returns if the audio/video is muted by default
defaultPlaybackRate Sets or returns the default speed of the audio/video playback
duration Returns the length of the current audio/video (in seconds)
ended Returns if the playback of the audio/video has ended or not
error Returns a MediaError object representing the error state of the audio/video
loop Sets or returns if the audio/video should start over again when finished

6. Video/Audio DOM 객체 (2/3) - 속성(2/2)
속성 설명
mediaGroup
Sets or returns a the group the audio/video belongs to (used to link multiple audio/vide
o elements)
muted Sets or returns if the audio/video is muted or not
networkState Returns the current network state of the audio/video
paused Sets or returns if the audio/video is paused or not
playbackRate Sets or returns the speed of the audio/video playback
played Returns a TimeRanges object representing the played parts of the audio/video
preload Sets or returns if the audio/video should be loaded when the page loads
readyState Returns the current ready state of the audio/video
seekable Returns a TimeRanges object representing the seekable parts of the audio/video
seeking Returns if the user is currently seeking in the audio/video
src Sets or returns the current source of the audio/video element
startDate Returns a Date object representing the current time offset
textTracks Returns a TextTrackList object representing the available text tracks
videoTracks Returns a VideoTrackList object representing the available video tracks
volume Sets or returns the volume of the audio/video

6. Video/Audio DOM 객체 (2/3) - 이벤트
이벤트 설명
abort Fires when the loading of an audio/video is aborted
canplay Fires when the browser can start playing the audio/video
canplaythrough Fires when the browser can play through the audio/video without stopping for buffering
durationchange Fires when the duration of the audio/video is changed
emptied Fires when the current playlist is empty
ended Fires when the current playlist is ended
error Fires when an error occurred during the loading of an audio/video
loadeddata Fires when the browser has loaded the current frame of the audio/video
loadedmetadata Fires when the browser has loaded meta data for the audio/video
loadstart Fires when the browser starts looking for the audio/video
pause Fires when the audio/video has been paused
play Fires when the audio/video has been started or is no longer paused
playing Fires when the audio/video is ready to play after having been paused or stopped for buffering
progress Fires when the browser is downloading the audio/video
ratechange Fires when the playing speed of the audio/video is changed
seeked Fires when the user is finished moving/skipping to a new position in the audio/video
seeking Fires when the user starts moving/skipping to a new position in the audio/video
stalled Fires when the browser is trying to get media data, but data is not available
suspend Fires when the browser is intentionally not getting media data
timeupdate Fires when the current playback position has changed
volumechange Fires when the volume has been changed
waiting Fires when the video stops because it needs to buffer the next frame

Lab 1
• 주어진 동영상을 플레이 시키도록 HTML 문서를 작성하라.
• 페이지가 로드되면 동영상은 자동으로 플레이 되도록 한다.
• 모든 브라우저가 플레이를 지원하도록 mp4형식과 ogg형식의 파일을 포함시키세요.
• 비디오 제어버튼을 표시하지 않고 자바스크립트를 이용해 비디오를 제어하라.
– 자바스크립트를 이용해서 플레이 진행상황을 표시하도록 구현하라.
• timeupdate 이벤트와 <progress> 요소를 이용하라.
• input 엘리먼트의 range 타입을 이용해 원하는 위치를 플레이시킬 수 있도록 하라.
– Play/Pause 버튼을 추가하여 동영상을 플레이 또는 일시 중지시키는 기능을 추가하라.
– Firefox와 Webkit 기반 브라우저에서는 동영상을 풀 스크린으로 보여주는 기능을 추가하
라.
• if(video.requestFullscreen || video.mozRequestFullScreen ||
video.webkitRequestFullScreen) {} 이용
• if문의 비교객체는 해당 함수객체임
– 풀스크린 버튼은 위 조건문 안에서 동적 생성되도록 함
• 버튼 클릭했을 때 호출되도록 하면 풀스크린으로 플레이됨
• 버튼을 createElement로 생성하고
– type, value 지정
• video 요소의 부모 요소의 자식 요소로 추가
– 플레이 진행 progress와 range의 폭은 스타일 시트를 이용하라.

Lab 1
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>video</title>
5. <style>
6. #time, #seekbar { width: 400px; }
7. </style>
8. <script>
9. window.onload = function() {
10. var video = document.querySelector("#video");
11. var videoUrl = video.currentSrc;
12. console.log(videoUrl);
13.
14. var progress = document.querySelector("#time");
15. video.addEventListener("timeupdate", function(event){
16. var percent = this.currentTime / this.duration;
17. progress.value = percent;
18. });
19. var playButton = document.createElement("input");
20. playButton.id = "playButton";
21. playButton.type = "button";
22. playButton.value = "Pause";
23. console.log(playButton);
24. video.parentNode.appendChild(playButton);
25. playButton.onclick = function(event) {
26. event.preventDefault();
27. if(video.paused) {
28. if(videoUrl != video.currentSrc) {
29. video.src = videoUrl;
30. video.load();
31. }else {
32. video.play();
33. }
34. this.value = "Pause";
34. }else {
35. video.pause();
36. this.value = "Play";
37. }
38. };
39. if(video.requestFullscreen || video.mozRequestFullScreen
|| video.webkitRequestFullScreen) {
40. var fullButton = document.createElement("input");
41. fullButton.id = "fullScreen";
42. fullButton.type = "button";
43. fullButton.value = "Full Screen";
44. console.log(fullButton);
45. video.parentNode.appendChild(fullButton);
46.
47. fullButton.onclick = function() {
48. if (video.requestFullscreen) {
49. video.requestFullscreen();
50. }
51. else if (video.mozRequestFullScreen) {
52. video.mozRequestFullScreen();
53. }
54. else if (video.webkitRequestFullScreen) {
55. video.webkitRequestFullScreen();
56. }
57. };
58. }
59. var range = document.querySelector("#seekbar");
60. range.addEventListener("click", function(event) {
61. video.currentTime = this.value / video.duration ;
62. });
63. };
64. </script>
65. </head>
66. <body>
67. <video id="video" width="400" height="300" autoplay >
68. <source src="mov_bbb.mp4" />
69. <source src="mov_bbb.ogg" />
70. </video><br>
71. <progress id="time"></progress><br>
72. <input type="range" id="seekbar" min="0" max="100"><br>
73. </body>
74. </html>

Lab 2
• 플레이 화면에 마우스롤 올리면 작은 프레임 이미지가 보이고 이를 클릭하면 해당 프레임으로 이동
하도록 하는 기능을 구현해보자.
• 이전 예제에 다음 코드를 추가한다. 이 예제를 응용하면 동영상이 플레이될 때 주요 장면을 기준으
로 원하는 프레임을 찾아 플레이시킬 수 있도록 할 수 있다.
• 프레임 이미지가 보여질 부분은 스타일 시트로 한다.
#thumbnail {
position: absolute;
top : 210px;
left : 10px;
z-index: 99;
}
</style>
<script>
//생략…
var thumbdiv = document.querySelector("#thumbnail");
video.addEventListener("mouseover", function() {
thumbdiv.innerHTML = "<img src=thumbnail_1.png>";
});
video.addEventListener("mouseout", function() {
setTimeout(function() {
thumbdiv.innerHTML = "";
}, 4000);
});
thumbdiv.addEventListener("click", function() {
video.currentTime = 2.5 ;
});
}
</script>
생략 …
</video><div id="thumbnail"></div><br>

5-2. html5 multimedia

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to 5-2. html5 multimedia

Similar to 5-2. html5 multimedia (18)

More from JinKyoungHeo

More from JinKyoungHeo (10)

5-2. html5 multimedia