Media 태그(audio태그/video태그/iframe태그) - HTML 0613

◎ media file 

html 문서안에 텍스트가 아닌 형태의 데이터를 넣는 형태

 

---

◎오디오 태그(audio)

<audio src="경로"></audio>
//src : 오디오파일 경로명시


<audio src="경로" controls></audio>
//controls : 컨트롤버튼


<audio src="경로" autoplay></audio>
//autoplay : 자동재생


<audio src="경로" loop></audio>
//loop : 반복재생

 

오디오태그 다른방법

• 이 방법은 명시된 확장자가 다른 브라우저에서 지원하지 않을때 type에 확장자를 추가해준다.
• 유저의 브라우저가 명시된 확장자를 모두 지원하지 않는 경우 텍스트를 적어서 표시해 줄 수 도 있다.

<audio>
   <source src="경로" type="확장자">
   <p> 브라우저를 업데이트 하세요!</p>
   <p> 
      <a herf ="https://browsehappy.com">
       브라우저 업데이트 하기
      </a>
   </p>
</audio>

 

 

---

◎비디오 태그 (video)

(= 오디오와 완전 동일)

<videpo src="경로"></videpo>
//src : 비디오파일 경로명시


<videpo src="경로" controls></videpo>
//controls : 컨트롤버튼


<videpo src="경로" autoplay></videpo>
//autoplay : 자동재생


<videpo src="경로" loop></videpo>
//loop : 반복재생

 

비디오태그 다른방법

• 이 방법은 명시된 확장자가 다른 브라우저에서 지원하지 않을때 type에 확장자를 추가해준다.
• 유저의 브라우저가 명시된 확장자를 모두 지원하지 않는 경우 텍스트를 적어서 표시해 줄 수 도 있다.

<video>
   <source src="경로" type="확장자">
   <p> 브라우저를 업데이트 하세요!</p>
   <p> 
      <a herf ="https://browsehappy.com">
       브라우저 업데이트 하기
      </a>
   </p>
</video>

---

◎iframe 태그

• html 문서 안에 또다른 html 문서를 임베드 하고 싶을때.
• 영상을 쉐어할때 많이 사용함 (유튜브 등)

<iframe src="url주소" frameborder=""></iframe>