[ css ] 멀티미디어 요소 (audio & video & iframe)

Suji Kang·2023년 12월 22일

🐾 HTML5관련 멀티미디어

audio

<audio>
: html5에서 음악이나 오디오같은 사운드를 재생하기위해 사용.

ex)
<audio src="file/test_ado.mp3" controls loop>
   표현되지 않을 때 글자가 나타남 
 </audio>
👉 작성방법 : 태그이름 경로(src) = "오디오경로" 그외 속성작성

📝 함께 사용가능한 속성

src (url)오디오파일의 위치를 연결,명시

controls 웹화면에 재생 컨트롤 막대를 표시

muted 오디오가 재생중이지만 소리를 끔(음소거처리)

loop 오디오를 반복 재생

autoplay 오디오를 자동 재생 (크롬에서는 자체적으로 자동재생을 제한하고 있으므로 개별설정하지 않을 경우 적용이 되지않음.)

preload (auto/metadata/none) 재생버튼을 눌러 재생하기 전 오디오 파일을 다운로드해 준비

📌 오디오요소 파일 확장자

MP3 : Moving Picture Experts Group에 의해 개발.손실 압축형 파일 형식으로 가장 많이 사용.

WAV : IBM과 Microsoft에 의해 개발. Microsoft의 표준 오디오 파일 형식.

Ogg : Xiph 재단에 의해 개발. MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식.
 <audio controls>
         <source src="file/test_ado.mp3" type="audio/mp3">
         <source src="file/test_ado.ogg" type="audio/ogg">
         <p>오디오 파일에 브라우저에서 지원되지 않습니다!</p>
 </audio>

video

<video>
: html5에서 영상을 실행하기위해 사용.

ex)
<video height="180" width="288" controls muted>
  <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
  <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
  <p>이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!</p>
</video>
👉 작성방법 : 태그이름 경로(src) = "비디오경로" 그외 속성작성
중첩된 요소 내에 여러 형식을 작성 할 수 있으며 브라우저는 상응하는 첫 번째 소스를 표현(아래와같이)
📌 혹은 요소 내에 비디오가 지원되지 않는 브라우저의 경우에는 태그내에 있는 텍스트가 표현되어짐!

📝 함께 사용가능한 속성

src (url)비디오파일의 위치를 연결,명시

controls 웹화면에 재생 컨트롤 막대를 표시 / 마우스포인터 올렸을 때 활성화

muted 비디오가 재생중이지만 소리를 끔(음소거처리)

loop 비디오를 반복 재생

width 비디오화면의 넓이 지정

height 비디오화면의 높이 지정

poster (URL) 파일을 다운로드 중 사용자가 보이게될 이미지를 명시

preload (auto/metadata/none) 재생버튼을 눌러 재생하기 전 비디오 파일을 다운로드해 준비

autoplay 비디오를 자동 재생
(크롬에서는 자체적으로 자동재생을 제한하고 있으므로 개별설정하지 않을 경우 적용이 되지않음.)

📌 오디오요소 파일 확장자

MP4 (MIME 타입: video/mp4)
WebM (MIME 타입: video/webm)
Ogg (MIME 타입: video/ogg)

iframe

<iframe>
: HTML문서에 다른 문서를 포함시킬 때 사용

웹 문서 안에 다른 외부 문서를 불러올 때 사용. 상황에 따라 유튜브와 같은 영상 링크나 많은 양의 콘텐츠 정보를 불러올 때 사용.

📝 함께 사용가능한 속성

width 넓이를 지정할 때 사용. (%, px)

height 높이를 지정할 때 사용. (%, px)

name 현재 아이프레임의 이름

src iframe에 표시할 문서의 주소를 지정

<iframe src="test.html" width="400" height="400"></iframe>
이렇게 test.html에서 사용한것을 iframe으로 가져올수있는것을 확인할수있다.

<iframe width="1280" height="720" src="https://www.youtube.com/embed/7xO1Czbdyd8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>