HTML Media

•  <video>: 영상을 삽입 할 때 사용한다
  • controls: 영상 조작 설정을 추가한다 (재생, 정지, 볼륨)
  • width & height
  • <source>
  • autoplay

<video width="400" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
        Your browser does not support HTML video.
 </video>

• <audio>

<audio controls>
        <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
        <source src="https://www.w3schools.com/html/horse.ogg" type="audio/mpeg">
      Your browser does not support the audio element.
</audio>

• <object>
  • 다른 html 문서나 이미지를 삽입하는 것이 가능하다

 <object width="100%" height="500px" data="hw2_1_form.php"></object>
 <object data="./img/car.jpg" width="100px" height="80px"></object>

• <embed>
  • 다른 html 문서나 이미지를 삽입하는 것이 가능하다

HTML YouTube videos

• <iframe>
  • autoplay (0: 자동 재생하지 않음, 1: 자동 재생함)
  • loop (0: 한번만 재생, 1: 무한반복)
  • controls (0: 재생버튼 등의 조작 버튼이 안 보인다, 1: 재생 버튼과 다른 조작 버튼이 보인다)

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
<!--YouTube url 주소 뒤에 있는 ?autoplay=1 옵션-->
</iframe>

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
<!--YouTube url 주소 뒤에 있는 &loop=1 옵션-->
</iframe>

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
<!--YouTube url 주소 뒤에 있는 ?controls=0 옵션-->
</iframe>