티스토리 뷰



HTML5 이전에 웹 브라우저에서는 동영상이나 음악을 듣기위해서는 상당히 많은 수고가 필요했다고 한다.

하지만 HTML5에서는 <audio>태그와 <video>태그가 추가 되면서 보다 쉽게 동영상이나 음악을 추가할수 있게 됬다.


이번 글에서는 웹페이지에 동영상이나 오디오를 추가하는법을 공부하겠다.



추천포스트


 

[HTML무엇일까] HTML5, 에디터, 기본구조 알아봅시다

[HTML5] 2. 웹페이지를 만들어보자 (텍스트,주석,수평선)

HTML5공부3. 리스트,링크,이미지,테이블






오디오


웹페이지에 자신이 좋아하는 곡이 나오게 하기위해서는 <audio>태그를 이용하면 된다


기본적인형식은



<audio src ="bgbg.mp3" autoplay controls>



해석을 해보자면


 <audio

 오디오 삽입태그

src ="bgbg.mp3" 

오디오 소스파일 경로 

autoplay 

자동재생 

controls> 

화면에 재생정지버튼이 보일것. 


이렇게 하나씩 본다면 이해하고 외우기 쉬울거다.




다음은 autoplay,controls같은 <audio> 요소들을 알아보자.

 loop

오디오를 반복하여 재생 

preload 

오디오를 미리다운 

src 

재생할 오디오가 존재하는 URL지정 

volume 

재생 볼륨을 설정 

 




.html파일과 오디오파일이 같은 디렉토리에 존재해야한다.








비디오


동영상 비디오이 나오게 하는 방법도 오디오와 거의 비슷하다. 비디오는 <video>태그를 사용할뿐이다.



<video src="dddd.mp4" autoplay controls>




해석을 해보자면

 <video

비디오 삽입태그 

src = "dddd.mp4" 

비디오 소스파일 경로(URL) 

autoplay 

자동재생 

controls> 

 화면에 재생정지버튼이 보일것.


이렇게 하나씩 본다면 이해하고 외우기 쉬울거다.





다음은 autoplay,controls같은 <video> 요소들을 알아보자.


 poster

비디오를 다운로드중일때 표시하는 이미지 

 src

재생할 비디오가 존재하는 URL을 지정한다. 

loop 

비디오를 반복재생 

preload 

전체 오디오다운 

muted 

비디오의 오디오 출력 중지 

width,height 

비디오 재생기의 너비와 높이 









이런식으로 비디오를 출력하면



웹페이지는 이렇게 출력이 됩니다.








댓글
댓글쓰기 폼