HTML 비디오

HTML에서 비디오를 재생하는 방법은 많습니다.

예제

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

개인적으로 시도해 보세요

문제, 문제, 그리고 해결책

HTML에서 비디오를 재생하는 것은 쉽지 않습니다!

모든 브라우저(인터넷 익스플로러, 크롬, 파이어폭스, 사파리, 오퍼라)와 모든 하드웨어(PC, 맥, 아이패드, 아이폰)에서 비디오 파일을 재생할 수 있도록 많은 기술을 익혀야 합니다.

이 장에서 CodeW3C.com은 문제와 해결책을 요약했습니다.

<embed> 태그 사용

<embed> 태그는 HTML 페이지에서 멀티미디어 요소를 내장하는 역할을 합니다.

아래의 HTML 코드는 웹 페이지에 내장된 Flash 비디오를 표시합니다：

예제

<embed src="movie.swf" height="200" width="200"/>

개인적으로 시도해 보세요

문제

  • HTML4는 <embed> 태그를 인식할 수 없습니다.您的页面无法通过验证.
  • 브라우저가 Flash를 지원하지 않으면 비디오를 재생할 수 없습니다.
  • iPad와 iPhone은 Flash 비디오를 표시할 수 없습니다.
  • 비디오를 다른 형식으로 변환하면 모든 브라우저에서 재생되지 않을 수 있습니다.

<object> 태그 사용

<object> 태그는 HTML 페이지에서 멀티미디어 요소를 내장하는 역할을 합니다.

아래의 HTML 부분은 웹 페이지에 내장된 Flash 비디오를 표시합니다：

예제

<object data="movie.swf" height="200" width="200"/>

개인적으로 시도해 보세요

문제

  • 브라우저가 Flash를 지원하지 않으면 비디오를 재생할 수 없습니다.
  • iPad와 iPhone은 Flash 비디오를 표시할 수 없습니다.
  • 비디오를 다른 형식으로 변환하면 모든 브라우저에서 재생되지 않을 수 있습니다.

<video> 태그 사용

<video>는 HTML 5에서 새로운 태그입니다.

<video> 태그는 HTML 페이지에 비디오 요소를 내장하는 역할을 합니다。

다음 HTML 코드는 ogg, mp4, 또는 webm 형식의 비디오를 웹 페이지에 내장하여 표시합니다：

예제

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
您的浏览器不支持视频标签。
</video>

개인적으로 시도해 보세요

문제

  • 비디오를 여러 가지 다른 형식으로 변환해야 합니다
  • <video> 요소는 오래된 브라우저에서 유효하지 않습니다。
  • <video> 요소는 HTML 4와 XHTML에서 검증되지 않습니다。

최고의 HTML 솔루션

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

개인적으로 시도해 보세요

예제에서는 4가지 다른 비디오 형식이 사용되었습니다. HTML 5 <video> 요소는 mp4, ogg, 또는 webm 형식 중 하나로 비디오를 재생하려고 시도합니다. 모두 실패하면 <embed> 요소로 이동합니다.

문제

  • 비디오를 여러 가지 다른 형식으로 변환해야 합니다
  • <video> 요소는 HTML 4와 XHTML에서 검증되지 않습니다。
  • <embed> 요소는 HTML 4와 XHTML에서 검증되지 않습니다。

주의사항：<!DOCTYPE html> (HTML5)를 사용하여 검증 문제를 해결하십시오。

유튜브 솔루션

HTML에서 비디오를 표시하는 가장 간단한 방법은 유튜브 등의 비디오 웹사이트를 사용하는 것입니다。

웹 페이지에서 비디오를 재생하고 싶다면, 비디오를 유튜브 등의 비디오 웹사이트에 업로드하고, 그런 다음 웹 페이지에 HTML 코드를 삽입하여 비디오를 재생할 수 있습니다：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"> 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

개인적으로 시도해 보세요

슈퍼 링크 사용

웹 페이지에 미디어 파일을 가리키는 슈퍼 링크가 포함되어 있으면, 대부분의 브라우저가 파일을 재생하기 위해 "보조 애플리케이션"을 사용합니다.

다음 코드 단편은 AVI 파일을 가리키는 링크를 보여줍니다. 사용자가 링크를 클릭하면, 브라우저가 Windows Media Player와 같은 "보조 애플리케이션"을 시작하여 이 AVI 파일을 재생합니다:

예제

<a href="movie.swf">비디오 파일 재생</a>

개인적으로 시도해 보세요

내장된 비디오에 대한 주석

웹 페이지에 포함된 비디오가 내장된 비디오라고 합니다.

웹 애플리케이션에서 내장된 비디오를 사용할 계획이면, 많은 사람들이 내장된 비디오가 귀찮다고 느낄 수 있다는 점을 인식해야 합니다.

또한 고려해야 할 것은 사용자가 브라우저에서 내장된 비디오 옵션을 꺼두었을 수도 있다는 점입니다.

사용자가 내장된 비디오를 보고 싶을 때만 포함하는 것이 가장 좋은 조언입니다. 긍정적인 예시는 사용자가 비디오를 볼 수 있고 링크를 클릭할 때 페이지가 열리고 비디오가 재생되는 것입니다.

HTML 4.01 멀티미디어 태그

태그 설명
<applet> 지지되지 않습니다.내장된 applet을 정의합니다.
<embed> 지지되지 않습니다.내장된 객체를 정의합니다. (HTML5에서 허용)
<object> 내장된 객체를 정의합니다.
<param> 객체의 매개변수를 정의합니다.

HTML 5 멀티미디어 태그

태그 설명
<video> 태그가 음악이나 다른 오디오 스트림과 같은 소리를 정의합니다.
<embed> 태그가 플러그인과 같은 내장된 내용을 정의합니다.