[HTML] 미디어 파일 Media

 

미디어 파일

• 미디어 파일이란, HTML 문서안에 텍스트가 아닌 데이터나 파일을 넣는 경우
• 이미지 파일
  • <img src="" alt ="">
• 오디오 파일
  • <audio src ="" controls> </audio>
• 비디오 파일
  • <video src="" >
• iframe
  • 현재 HTML 문서에 다른 문서를 끼워넣을 때 사용함

 

 

이미지 파일

• <img src="" alt ="">

 

 

 

오디오 파일

• <audio src ="오디오주소"> </audio>
• controls 속성
  • 오디오 파일을 컨트롤할 수 있는 버튼이 생김
• autoplay 속성
  • 자동 재생됨
• loop 속성
  • 반복 재생

// control 속성
<audio src="url주소" controls></audio>


// 자동재생 및 반복재생
<audio src="url주소" autoplay></audio>  // 자동재생

<audio src="url주소" autoplay loop></audio>  // 자동재생 + 반복재생





// 여러 소스 사용하기
 // 오디오타입 1번 먼저 틀고 웹브라우저 호환이 안되면 오디오타입 2번 틀고 그것도 호환이 안되면 3번 틈
<audio control>
  <source src="url주소1" type="오디오타입1"> 
  <source src="url주소2" type="오디오타입2">
  <source src="url주소3" type="오디오타입3">
</audio>

 

 

 

 

 

 

비디오 파일

• <video src="비디오주소" ></video>
• controls 속성
  
  • 비디오 파일 시작버튼이 생김
• autoplay 속성
  • 자동재생
• loop 속성
  • 반복재생

 

 

// control 속성
<video src="url주소" controls></video>


// 자동재생 및 반복재생
<video src="url주소" autoplay></video>  // 자동재생

<video src="url주소" autoplay loop></video>  // 자동재생 + 반복재생


// 여러 소스 사용하기
 // 비디오타입 1번 먼저 틀고 웹브라우저 호환이 안되면 비디오타입 2번 틀고 그것도 호환이 안되면 3번 틈
<video>
  <source src="비디오 주소1" type="비디오타입1">
  <source src="비디오 주소2" type="비디오타입2">
  <source src="비디오 주소3" type="비디오타입3">
</video>

 

 

 

iframe

• <iframe src="url주소" frameborder="0"></iframe>
• 주로 다른 문서 태그 복붙함. 내가 직접 안만듦