웹 페이지를 만들다 보면 문서에 동영상을 삽입해야 하는 경우가 종종 생깁니다. 예를 들어 케이크 굽는 법 튜토리얼을 작성하면서 레시피 옆에 관련 영상을 함께 보여주고 싶을 수 있죠.
HTML 문서에 동영상을 삽입하는 방법은 여러 가지가 있으며, 그중 대표적인 것이 바로 <video>, <object>, <embed> 세 가지 요소입니다. 이 가이드에서는 각 방법의 사용법과 특징, 브라우저 호환성까지 하나씩 살펴보겠습니다.
<video> 태그
HTML5에는 웹 페이지에 동영상을 삽입하기 위한 전용 요소인 <video>가 포함되어 있습니다. 도입된 지 오래되지 않아 극히 일부 구형 브라우저에서는 작동하지 않지만, 현재 대부분의 모던 브라우저에서는 문제없이 지원됩니다.
<video> 요소는 크게 두 가지 정보를 받습니다. 재생할 동영상의 소스 경로와, 플레이어에 표시할 컨트롤입니다. 기본 문법은 다음과 같습니다.
<video controls="controls" src="videos/ourVideo.mp4"> 이 브라우저는 video 요소를 지원하지 않습니다. </video>
위 예제에서는 src 속성으로 videos/ourVideo.mp4 파일을 참조했고, controls 속성을 통해 브라우저 기본 컨트롤(재생·일시정지·음량 조절 등)을 활성화했습니다. <video> 태그 안에 작성한 텍스트는 동영상을 재생할 수 없는 환경에서 대신 화면에 표시됩니다.
여러 개의 대체 소스를 제공하려면 <source> 요소를 활용하면 됩니다.
<video controls="controls"> <source src="videos/ourVideo.mp4" type="video/mp4"> <source src="videos/ourVideo.webm" type="video/webm"> 이 브라우저는 video 요소를 지원하지 않습니다. </video>
브라우저는 위에서부터 순서대로 소스를 확인한 뒤, 자신이 지원하는 첫 번째 형식을 재생합니다. MP4 외에도 WebM, Ogg 같은 표준 동영상 형식을 모두 사용할 수 있으므로, 다양한 브라우저 환경을 고려해 대체 소스를 함께 지정해 두는 것이 좋습니다.
<embed> 태그
<embed> 요소를 사용하면 동영상을 비롯한 각종 멀티미디어 콘텐츠를 HTML 페이지에 삽입할 수 있습니다. 과거에는 Adobe Flash 동영상(.swf)을 불러올 때 많이 사용되었는데, 예시는 다음과 같습니다.
<embed src="videos/ourVideo.swf" width="600px" height="400px">
위 코드는 600×400 크기의 플레이어로 Flash 동영상을 화면에 렌더링합니다. width와 height 속성으로 플레이어 크기를 직접 지정할 수 있다는 점이 특징입니다.
다만 주의할 점이 있습니다. Flash 리소스를 재생하려면 사용자 시스템에 Flash가 설치되어 활성화되어 있어야 했습니다. 더욱이 Adobe는 2020년 말 공식적으로 Flash 지원을 종료했기 때문에, 현재 실무에서는 Flash 기반 <embed> 사용을 권장하지 않습니다.
<object> 태그
<object> 태그 역시 다양한 미디어를 HTML 페이지에 삽입할 때 사용됩니다. HTML5 동영상, 오디오, PDF 파일 등 여러 형식의 콘텐츠를 담을 수 있는 범용 요소입니다. 사용 예는 다음과 같습니다.
<object data="videos/ourVideo.mp4" width="600px" height="400px"></object>
<object>는 src 대신 data 속성으로 리소스 경로를 지정한다는 점에 유의하세요. 과거에는 Flash 콘텐츠 삽입에 이 태그가 많이 쓰였으며, 이 경우에도 사용자에게 Flash 플러그인이 필요했습니다. 따라서 지금이라도 <object>를 사용해야 한다면, Flash가 설치되어 있지 않은 사용자를 위해 <video> 요소를 함께 제공하는 것이 좋습니다.
결론
HTML에서 동영상 파일을 웹 페이지에 삽입할 수 있는 요소는 <video>, <object>, <embed> 세 가지입니다. 이번 글에서는 각 태그의 기본 사용법과 주요 속성, 그리고 브라우저 및 Flash 호환성까지 함께 살펴보았습니다.
Flash 지원이 종료된 현재, 새로운 프로젝트라면 HTML5 표준인 <video> 태그를 사용하는 것이 가장 안전하고 권장되는 방법입니다. 이제 어떤 웹 페이지에든 자신 있게 동영상을 삽입할 준비가 되셨을 겁니다!