멀티미디어태그 / day16 / 25.04.22

멀티미디어 태그

inline-block속성

인터넷 초기에는 웹 사이트에서 동영상을 보거나 음원을 듣기 위해서 PC를 통해서만 멀티미디어 파일들을 재생할 수 있었다. 그래서 여러가지 미디어 파일을 확인하려면 ActiveX를 설치해야만 했고, 이 과정에서 악성프로그램이 딸려오는 경우가 많아 이 문제를 해결하기 위해 만들어진 태그가 바로 멀티미디어 태그이다. 

 

멀티미디어 태그의 종류로는 <Video>,<img>,<audio> 태그가 있다. 모두 src로 불러온다. 

<audio>태그

소리만 재생되는 음원파일을 말한다. 현재 브라우저에서는 .MP3, .WAV, .Ogg 확장자를 지원한다.

 

[기본형]

1. 오디오 파일을 1개만 연결하는 경우

<audio src="파일경로" 속성...>이 음원은 해당 브라우저에서 지원되지 않습니다.</audio>

가운데는 안내문구를 쓰는 공간이다.

2. 오디오 파일을 확장자별로 여러 개 연결하는 경우

<audio 속성...>

   <source src="파일경로" type="audio/ogg" />

   <source src="파일경로" type="audio/mp3" />

   <source src="파일경로" type="audio/wav" />

     이 음원은 해당 브라우저에서 지원되지 않습니다.

</audio>

 

[속성]

autoplay, controls, loop, muted는 속성명과 속성값이 모두 같아 속성명만 적어도 된다.(속성값 생략)

· autoplay : 오디오를 자동 재생한다. 속성값은 autoplay로 속성명과 속성값이 같다. 

· controls : 플레이 버튼이나 정지 버튼과 같이 오디오의 실행을 제어할 수 있는 막대바.

· loop : 오디오를 무한 재생한다. 마찬가지로 속성명만 적는다.

· muted : 음소거 

 

· preload : 페이지가 로드될 때 오디오 파일이 같이 로드되어야하는지 여부와 그 방법을 지정한다. 

       속성값1) auto : 페이지가 로드될 때 오디오 파일을 전부 로딩시킴.

                 2) ★metadata : 페이지가 로드될 때 메타데이터만 미리 로드시킴.

                 3) none : 페이지가 로드될 때 오디오 파일을 로딩시키지 않음.  재생버튼을 누르면 그 때 로딩이 시작됨.

 

보통 이미지 폴더 안에 video라는 이름의 폴더를 더 만들고, 그 안에 video를 저장한다.

<video>태그

동영상을 출력해주는 태그. 현재 브라우저에서는 .mp4, .WebM, Ogg확장자를 지원한다. 

 

[기본형]

1. 비디오 파일을 1개만 연결할 경우

<video src="파일경로" 속성...>이 동영상은 해당 브라우저를 지원하지 않습니다.</video>

2. 비디오 파일을 확장자별로 여러 개 연결할 경우

<video 속성...>

   <source src="파일경로" type="video/ogg" />

   <source src="파일경로" type="video/mp4" />

   <source src="파일경로" type="video/webm" />

  이 동영상은 해당 브라우저를 지원하지 않습니다.

</video>

[속성]

· autoplay : 비디오를 자동재생한다.  현재 시점에서는 muted속성이 함께 있어야만 자동재생이 가능함.

· controls : 플레이 버튼이나 정지버튼과 같은 비디오 실행을 제어해주는 막대바가 표시됨.

  (웹사이트에서 controls잘 안 쓴다. )

· width : 동영상의 넓이를 지정한다. 보통 css에서 처리하는 경우가 더 많음. 

· height : 동영상의 높이를 지정한다. 보통 css에서 처리하는 경우가 더 많음. 

· loop : 무한재생

· muted : 음소거

· poster : 비디오를 재생하기 전에 보여줄 썸네일 (미리보기) 이미지(*사용하려면 미리 이미지를 만들어놓아야한다.)

 (썸네일) 값은 상대경로를 사용한다.

· preload : 페이지가 로드될 때 비디오 파일이 같이 로드되어야하는지의 여부와 그 방법을 명시함. 속성값과 뜻은 audio태그와 완전히 동일하다.

 

autoplay랑 poster같이 쓰지 않는다. 이미 재생되면 미리보기를 볼 수 없기 때문에 controls랑 poster같이 쓴다.

 

동영상 퍼올 때 

유튜브 들어가서→공유→퍼가기 태그 복사 

width랑 height가 나와있는데 이건 css에서 지정해주는게 좋다. 

---

실습 pexels에서 .MP4 비디오 다운. 640

  <!-- 오디오 파일 -->

    <audio

      src="./img/video1.mp4"

      controls

      autoplay

      muted

      loop

      preload="metadata"

    >

      이 음원은 해당 브라우저에서 지원되지 않습니다.

    </audio>

    <br />

    <!-- 오디오 파일 연결 - 파일이 여러개 일때 -->

    <audio controls>

      <source src="./img/video1.mp4" type="audio/mp4" />

      <source src="./img/video1.wav" type="audio/wav" />

      <source src="./img/video1.ogg" type="audio/ogg" />

      이 음원은 해당 브라우저에서 지원되지 않습니다.

    </audio>

    <br />

    <!-- 동영상 파일 -->

    <video src="./img/video1.mp4" autoplay muted loop>

      이 동영상은 해당 브라우저에서 지원되지 않습니다.

    </video>

    <br />

    <!-- 동영상 파일 여러개 연결 -->

    <video controls>

      <source src="./img/video1.mp4" type="video/mp4" />

      <source src="./img/video1.webm" type="video/webm" />

      <source src="./img/video1.ogg" type="video/ogg" />

      이 동영상은 해당 브라우저에서 지원되지 않습니다.

    </video>

    <br />

    <!-- 유튜브 동영상 퍼오기 -->

    <iframe

      width="800"

      height="500"

      src="https://www.youtube.com/embed/m28k8OGpL14?si=eN7B5oF-rRkxF1UW"

      title="YouTube video player"

      frameborder="0"

      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

      referrerpolicy="strict-origin-when-cross-origin"

      allowfullscreen

    ></iframe>

    <br />

    <iframe

      src="https://www.daum.net/"

      frameborder="1"

      width="500"

      height="700"

    ></iframe>

  </body>

</html>