웹과 멀티미디어

<object> 와 <embed>

<embed> 요소는 외부 어플리케이션으로 부터 제공되는 컨텐츠나 브라우저 플러그인으로 제공되는 대화형 컨텐츠를 웹 문서에 배치하기 위해 사용되는 컨테이너를 나타냅니다.

<object> 요소는 웹 브라우저에서 직접 재생할 수 없는 PDF 파일이나 플래시 애니메이션 같은 외부 자원을 나타냅니다.

<embed type="video/quicktime" src="movie.mov" width="640" height="480" />

<object
  data="flashmovie.swf"
  width="600"
  height="800"
  type="application/x-shockwave-flash"
>
  Please install the Shockwave plugin to watch this movie.
</object>

한마디로 HTML이 아닌 것을 HTML 문서 내의 특정 위치에 배치하기 위한 용도로써 사용되는 태그들입니다.

embed 태그는 많은 웹 브라우저들에서 아주 오래전부터 지원해왔지만, HTML4의 공식사양에 포함되지 않습니다.

HTML5부터 공식 사양에 편입 되었는데요.

따라서, HTML5 문서에서 사용될 경우 유효성 검사를 통과하지만, HTML4 문서에 <embed> 태그를 사용할 경우 웹표준 유효성 검사를 통과할 수 없습니다.

하지만 말씀드렸다시피 오래전부터 비표준으로써 사용되고 있던 태그이기에, HTML5를 지원하지 않는 아주 오래된 브라우저를 위해 object 태그의 대안으로 사용할 수 있습니다.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/QG8v5el8VMg"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

공통 속성들

height & width

컨텐츠의 너비와 높이를 지정합니다.
픽셀 단위의 절대값을 사용하여야 하며, 퍼센트 단위는 사용할 수 없습니다.

type

어떤 플러그인을 통해 재생할지를 가르키는 MIME type을 지정합니다.

embed 속성들

src

삽입할 컨텐츠의 URL을 지정합니다.

object 속성들

data

<embed> 태그의 src 속성과 역할이 같습니다.

name

다른 요소와 구분할 수 있는 이름을 지정합니다.

<video> 와 <audio>

멀티미디어의 웹 표준화

HTML5 이전에는 영상이나 소리와 같은 멀티미디어 자원을 별도의 플러그인을 통해 재생할 수 밖에 없었으나, 이제는 웹 표준화가 되어 브라우저가 별도의 플러그인 없이 직접 영상과 소리를 재생할 수 있게 되었습니다.

즉, 플랫폼 환경에 구애받지 않고 웹 표준을 지원하는 모던 브라우저가 있다면 어디서든 같은 방법으로 동영상과 음악을 재생할 수 있게된 것이죠.

이를 지원하는 HTML 태그로 <video>와 <audio>가 있습니다.

<video>

각종 영상 포맷

확장자	MIME	브라우저별 지원여부
mp4	video/mp4	모든 모던 웹브라우저뿐 아니라 IE 조차 9버전부터 지원합니다.
webm	video/webm	IE11 및 모던 브라우저 풀 서포트. 사파리는 VP8 코덱만 지원.
ogv	video/ogg	크로미움 계열 브라우저 및 오페라만 풀 서포트.

• mp4의 경우 H.264 비디오 코덱을 사용 가장 뛰어난 압축률과 영상 퀄리티를 보여줍니다.
• mp4는 유료 라이선스가 있습니다. 따라서, 웹 용도 외의 상용 목적으로 사용시 라이선스 비용을 지불해야합니다.
• webm의 경우 mp4 보다 압축률과 퀄리티 측면에서 약간 떨어지지만 오픈소스라는 큰 장점을 가지고 있고, 라이브 스트리밍에 강하다는 장점을 지니고 있습니다.
• av1 이라는 이름의 새로운 영상 코덱이 개발중이며 현재 크로미움 계열 브라우저 및 파이어폭스에서 풀 서포트 중입니다. 향후 vp9의 바톤을 터치하고 mp4와 경쟁할 차세대 영상 코덱으로써, 모든 성능에서 vp9 및 mp4를 상회하는 것으로 알려져 있습니다. (하드웨어 코덱의 지원 상황이 좋지 않아 아직은 시기상조입니다.)
• Youtube에서 4k 영상을 각각 vp9과 av1 인코딩 버전으로 다운받았을때 av1의 크기가 40% 이상 작았다는 이야기가 있습니다.
• 압축률이 높을수록 영상 전송시 낮은 대역폭을 사용합니다. 극단적인 비교를 하자면 gif와 mp4로 만들어진 비슷한 길이, 퀄리티의 영상들의 경우 영상 크기가 10배 이상 차이가 나기도 합니다.
• 절대 gif로 '동영상'을 만들지 마세요.

예시

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  브라우저가 비디오태그를 지원하지 않아 이 대체 텍스트를 표시합니다.
</video>

속성들

• controls
  • 재생 컨트롤러를 표시합니다.
• autoplay
  • 자동으로 재생합니다.
• muted
  • 음소거
• loop
  • 영상이 끝나지 않고 반복됩니다.
• src
  • 영상 URL
• width
  • 영상의 너비
• height
  • 영상의 높이
• preload
  • 영상을 미리 불러올지에 대한 여부
• poster
  • 다운로드 되기 전이나 다운로드 중일때 표시할 포스터 이미지의 주소.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_preload

audio

각종 오디오 포맷

확장자	MIME	브라우저별 지원여부
MP3	audio/mpeg	IE는 9버전부터 / 모든 브라우저에서 서포트합니다.
OGG	audio/ogg	IE를 제외하고 모든 모던 웹 브라우저가 서포트합니다.
WAV	audio/wav	IE를 제외한 모든 웹 브라우저에서 서포트합니다.

예시

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  브라우저가 오디오 태그를 지원하지 않아 이 대체텍스트를 표시합니다.
</audio>

속성들

• controls
  • 재생 컨트롤러를 표시합니다.
• autoplay
  • 자동으로 재생합니다.
• muted
  • 음소거
• loop
  • 음성이 끝나지 않고 반복됩니다.
• src
  • 음성 URL
• preload
  • 음성을 미리 불러올지에 대한 여부

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio