HTML5 동영상의 작동 방식은? | HTML 동영상

HTML5란?

HTML5는 인터넷에서 콘텐츠 서식을 지정하는 코딩 언어인 하이퍼텍스트 마크업 언어(HTML)의 최신 버전입니다. 모든 웹 페이지에서는 HTML을 사용하여 브라우저에 콘텐츠를 표시하는 방법을 알려줍니다. HTML5에는 이전 버전의 HTML에 비해 여러 가지 추가 기능이 있으며, 그 기능 중 하나는 웹 페이지에 동영상을 추가하는 기능입니다. 기타 HTML5 기능에는 SVG 그래픽 지원, 웹 사이트의 탐색을 정의하는 태그, 머리글 및 바닥글 태그가 포함됩니다.

HTML5 동영상 요소는 어떻게 작동할까요?

HTML5 동영상 요소는 브라우저가 이미지 파일을 로드하는 방식과 유사하게 비디오 파일의 위치를 지정하여 다른 소스에서 비디오 파일을 로드하도록 브라우저에 지시합니다(이미지 자체는 HTML 파일에 저장되지 않고 브라우저에서 다른 곳에서 가져옴). 너비, 높이 등의 속성을 포함시켜 브라우저에 동영상 표시 방법을 알려줄 수도 있습니다. 다른 마크업 코드는 페이지에서 어디에 배치해야 하는지 브라우저에 알려줄 수 있습니다.

HTML5 동영상 태그는 <video>이며, 태그는 다른 HTML 요소와 유사하게 </video>로 끝납니다.

이러한 태그들 사이에서 <source> 태그는 동영상 파일의 위치를 나타냅니다. 이 태그 내에는 동영상 소스(src)와 파일 유형(type)이 모두 다음과 같이 표시됩니다.

<video>
  <source src="example.mp4" type="video/mp4">
</video>

다음과 같은 중요한 속성도 <video> 태그 내에 포함될 수 있습니다.

• 너비: 동영상의 너비를 픽셀 단위로 지정합니다.픽셀 수는 따옴표 사이에 넣습니다. width="370"
• 높이: 동영상의 높이를 지정합니다.너비 속성과 유사하게 작동합니다.
• 재생, 일시 정지, 볼륨: 이들 컨트롤을 통해 사용자는 동영상 재생을 제어할 수 있습니다.컨트롤을 <video> 태그에 추가하여 포함시킵니다.

브라우저가 첫 번째 파일 형식을 지원하지 않는 경우 동영상의 대체 소스를 <video> 태그들 사이로 이동시킬 수도 있습니다. 브라우저는 항상 나열된 첫 번째 소스를 사용합니다.

또한 <video> 태그들 사이에 텍스트를 넣을 수 있으며, 이 텍스트는 사용자의 브라우저가 HTML5 동영상을 지원하지 않는 경우에만 표시됩니다.

이 모든 것을 종합하면 임베디드 동영상용 HTML5 코드는 다음과 같습니다.

<video controls width="370" height="130">
  <source src="example.mp4" type="video/mp4">
  <source src="alternate-example.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>

autoplay(페이지가 로드되는 즉시 동영상 재생), loop(동영상 반복 재생), muted(동영상 음소거), poster(동영상 로드 전 이미지 표시) 등 다양한 속성을 동영상 요소 내에서 사용할 수도 있습니다.Mozilla에는 이러한 속성에 대한 좋은 문서가 있습니다.

HTML5에는 어떤 스트리밍 프로토콜이 사용될까요?

HTML5는 그 자체로는 스트리밍 프로토콜이 아닙니다. HTML5로 구축된 웹 사이트는 HTTP 라이브 스트리밍(HLS) 및 MPEG-DASH등 여러 가지 스트리밍 프로토콜을 사용하여 동영상을 재생할 수 있습니다. 이는 HTML 마크업 코드에서가 아니라 서버 측에서 구성됩니다.

모든 브라우저에서 HTML5를 지원할까요?

모든 주요 브라우저에서 HTML5를 지원하므로 이전 버전의 HTML에 포함되지 않았던 HTML5 태그를 해석할 수 있습니다. 하지만 모든 브라우저에서 HTML5의 모든 기능을 지원하는 것은 아닙니다. 개발자는 일부 사용자가 HTML5 동영상 요소를 해석할 수 없는 오래된 버전의 브라우저를 사용하고 있을 수 있다는 점을 염두에 두어야 합니다.

HTML5 이전에는 웹 사이트에 동영상 콘텐츠가 어떻게 포함되었을까요?

2008년에 HTML5가 출시되기 전에는 Adobe Flash 플러그인을 사용하여 동영상을 임베드하는 경우가 가장 많았습니다. HTML5를 통해 개발자는 플러그인 없이도 몇 개의 HTML 태그만으로 웹 페이지에 동영상을 삽입할 수 있습니다. 그 결과 플래시의 필요성이 줄어들었고, Adobe에서는 2020년 12월 31일에 마침내 플래시 지원을 중단했습니다.

오늘날 대부분의 사용자는 추가 브라우저 플러그인 없이 동영상을 스트리밍할 수 있으며, 개발자는 플러그인에 의존하지 않고도 다양한 방법으로 동영상을 임베드할 수 있습니다. HTML5 동영상 요소는 이를 위해 가장 많이 사용되는 방법 중 하나입니다.

브라우저 플러그인이란?

브라우저 플러그인은 브라우저에 포함되지 않은 기능을 추가하는 소프트웨어입니다. 예전에는 브라우저에 동영상 재생 기능이 포함되어 있지 않은 경우가 많았습니다. Adobe Flash와 같은 타사 플러그인이 이러한 간극을 메우는 데 도움이 되었습니다.

하지만 플러그인은 보안 위협이 될 수도 있습니다. 브라우저와 웹 사이트가 제공하는 공격면 외에 외부 공격자가 브라우징 세션을 손상시킬 수 있는 추가적인 공격면을 하나 더 제공합니다. 또한 플러그인으로 인해 페이지 기능이 느려질 수 있습니다. 플러그인에 의존한다는 것은 웹 페이지를 로드하기 위해 한 가지가 아닌 여러 소프트웨어가 제대로 빠르게 작동해야 한다는 것을 의미합니다.

HTML5에서 가능한 것처럼 동영상이 기본적으로 임베드되어 있으면 더 빠르게 로드됩니다. 플러그인 사용을 피하는 것은 더 안전하기도 합니다.

Cloudflare Stream 동영상은 어떻게 임베드될까요?

Cloudflare Stream은 동영상 인코딩, 저장, 전송, 재생을 결합한 온디맨드 비디오 플랫폼입니다. 동영상 파일을 Stream에 업로드하고 웹 페이지에 삽입하는 방법을 알아보려면 Cloudflare Stream 설명서를 참조하세요. 또는 Cloudflare Stream에 대해 자세히 알아본 다음에 시작하세요.