반응형

 

<vedio>태그

video태그는 HTML5에서 등장한 태그로 video태그가 나오기 전까지는 웹페이지에 영상을 띄우기 위해 별도의 프로그램을 설치하고 절차가 복잡했었습니다. video태그의 등장으로 이젠 웹페이지에 동영상을 띄우는 일이 간편해졌습니다.

<video src="동영상 주소">
  웹브라우저가 HTML5의 video 태그를 지원하지 않을 때 출력할 내용
</video>
  • src : 영상 주소
  • controls : 컨트롤러 표시(재생, 멈춤, 슬라이드 바, 볼륨, 음소거)
  • autoplay : 자동재생
  • loop : 반복 재생
  • width : 영상의 가로길이
  • height : 영상의 세로 길이
  • muted : 음소거
  • poster : 동영상의 대표 이미지
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>

<video src="https://www.youtube.com/watch?v=0QyEHftWQhA" width=500 controls = autoplay>
  웹브라우저가 HTML5의 video 태그를 지원하지 않을 때 출력할 내용
</video>

</body>
</html>

 

 

<audio>태그

audio태그는 웹브라우저에서 플러그인의 도움 없이 오디오를 재생시킬 수 있는 태그입니다.

<audio src="동영상주소" controls="" autoplay="" loop="" preload="">
</audio>
  • src : 파일 주소
  • controls : 컨트롤러 표시(재생, 멈춤, 슬라이드 바, 볼륨, 음소거)
  • autoplay : 자동재생
  • loop : 반복 재생
  • preload : 음악을 재생하기 전에 모두 불러올지 지정
    • "none" : 미리 다운로드하지 않음
    • "metadata" : 기본정보(크기, 첫 프레임, 오디오 길이 등등)를 가져온다.
    • "auto" : 미리 다운로드한다(기본 값)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>

<audio src="Shift K3Y - Entirety.mp3" controls autoplay loop preload="">
</audio>

</body>
</html>

 

 

브라우저마다 지원하는 오디오 확장자가 다르기 때문에 모든 브라우저에서 오디오를 실행시키기 위해서는 아래의 source태그를 사용합니다.

<audio controls="controls">
    <source src="제목.mp3" type="audio/mp3" />
    <source src="제목.ogg" type="audio/ogg" />
</audio>

 

웹브라우저에서 지원하는 음악파일 형식 (역시 갓 크롬...)

  IE Crome FireFox Safari Opera
MP3 O O X O X
OGG X O O O O
WAV X O O X O

 

 

 

 

 

📚 참고

참고 서적 - 웹코딩 시작하기 (저자 김태영)

반응형

+ Recent posts