[html] Audio랑 Video 넣어보기

이제 audio랑 video도 넣어볼 줄 알아야합니다:)

먼저  audio로 음악듣기를 해볼게요??

 

 

html파일 하나 생성해주신 후에

body사이에 다음과 같이 코드 작성해주세요

<h2>html5에 추가된 Audio&Video</h2>
<!-- mp3파일 -->
<h3>Audio로 음악 듣기</h3>
<audio src="../sound/audio.wav" controls="controls"></audio> <br>

이미지 파일 넣어주듯이 가지고 계신 오디오파일 복사하신 후에

폴더에 붙여넣기 해주세요:)

 

그 다음 <audio src="../sound/audio.wav"></audio> 라고 해주시는 거에요

 

우리는 또 음악파일을 컨트롤 해줄 컨트롤 박스가 필요하겠죠??

그래서 controls="controls"를 추가해주시면 됩니다

 

 

전체는  <audio src="../sound/audio.wav" controls="controls"></audio>

 

 

그리고 컴파일 해보시면

다음과 같이 나오것이쥬?!

 

 

 

 

 

블럭 하나 더 넣어주세요:)

이제 video 넣어주시면 됩니다!!

 

다음과 같은 코드를 작성해주시는데요

과정은 오디오 파일을 넣는 과정과 동일합니다.

 

여기서 포인트는

onmouseover과 onmouseout을 사용했다는 점입니다:)

 

 

onmouseover -> 마우스를 영상 위에 올리면 동영상이 재생되도록 할 예정

onmouseout -> 마우스가 영상 밖으로 가면 동영상 중지되도록 할 예정

 

onmouseover="this.play()"

onmouseout="this.pause()"

라고 해주시면 됩니다.

 

<!-- 동영상 -->
	<h3>Video로 영상보기</h3>
	<video src="../sound/video.m4v" controls="controls"
		width="300" height="200"
		onmouseover="this.play()"
		onmouseout="this.pause()">	
	</video>

 

컴파일하면 다음과 같이 

영상이 웹페이지에 추가가 될 거에요

마우스를 영상 위에 올렸다가 나왔다가 해보시면서

제대로 play와 pause가 작동되는 지도 확인해주세요!!

 

 

재생과 일시정지까지 모두 잘 되었다면 성공!^^!