video, iframe 비교

<video> 요소

• 용도: 비디오 콘텐츠를 웹 페이지에 삽입하고 재생하기 위해 사용됩니다.
• 속성:
  • src: 비디오 파일의 URL을 지정합니다.
  • controls: 비디오 컨트롤(재생, 일시정지, 볼륨 등)을 표시합니다.
  • autoplay: 페이지 로드 시 자동으로 비디오를 재생합니다.
  • loop: 비디오가 끝나면 처음부터 다시 재생합니다.
  • muted: 비디오를 음소거합니다.
  • poster: 비디오가 로드되기 전에 표시되는 이미지 URL입니다.

<video src="video.mp4" controls autoplay loop muted poster="poster.jpg">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

<iframe> 요소

• 용도: 다른 HTML 문서나 웹 페이지를 현재 페이지에 삽입하기 위해 사용됩니다. 예를 들어, 다른 웹 사이트, 유튜브 비디오, 구글 맵 등을 임베드할 때 사용됩니다.
• 속성:
  • src: 임베드할 콘텐츠의 URL을 지정합니다.
  • width 및 height: iframe의 크기를 지정합니다.
  • frameborder: iframe 테두리의 두께를 지정합니다.
  • allowfullscreen: iframe이 전체 화면 모드를 허용합니다.

<iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen>
  브라우저가 iframe 태그를 지원하지 않습니다.
</iframe>

주요 차이점

• 목적:
  • <video>: 비디오 파일을 삽입하고 재생하기 위함.
  • <iframe>: 다른 웹 페이지나 문서를 임베드하기 위함.
• 내용:
  • <video>: 비디오 파일 (MP4, WebM, Ogg 등)
  • <iframe>: 외부 HTML 문서나 웹 페이지.
• 컨트롤:
  • <video>: 비디오 재생 관련 컨트롤 제공 (재생, 일시정지, 볼륨 등)
  • <iframe>: 삽입된 콘텐츠에 따라 다름 (일반적으로 웹 페이지의 컨트롤 사용)