HTML 기본 튜토리얼

HTML 미디어

HTML 참조 매뉴얼

HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML 예제 모든 것 HTML 오디오(Audio)

HTML 비디오（Video）재생

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

HTML 비디오(비디오)

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>

테스트해 보세요 ‹/›

문제 및 해결 방법

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

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

이 장에서는 기본 튜토리얼이 문제와 해결 방법을 요약했습니다.

사용하기 <embed> 태그

下面的 HTML 代码显示嵌入网页的 Flash 视频：

온라인 예제

문제

HTML4 <embed> 태그를 인식할 수 없습니다. 페이지는 검증되지 않습니다.
브라우저가 Flash을 지원하지 않으면 비디오를 재생할 수 없습니다
iPad 및 iPhone은 Flash 비디오를 표시할 수 없습니다.
비디오를 다른 형식으로 변환하면, 그럼에도 불구하고 모든 브라우저에서 재생되지 않을 수 있습니다

<object> 태그를 사용하여

아래의 HTML 단편은 웹 페이지에 삽입된 Flash 비디오를 표시합니다:

예제

문제:

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

HTML을 사용하여5 <video> 요소

HTML5 <video> 태그는 비디오나 영화를 정의합니다.

<video> 요소는 모든 현대 브라우저에서 지원됩니다.

다음 HTML 단편은 ogg, mp4 형식의 비디오를 웹 페이지에 삽입한 예입니다4 또는 webm 형식의 비디오를 재생할 수 없습니다:

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.webm"　type="video/webm">
　　브라우저가 video 속성을 지원하지 않습니다
</video>
</body>
</html>

테스트해 보세요 ‹/›

문제:

비디오를 여러 가지 다른 형식으로 변환해야 합니다
<video> 요소는 오래된 브라우저에서는 효과적이지 않습니다.

최상의 HTML 솔루션을 사용했습니다

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

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>

테스트해 보세요 ‹/›

문제:

비디오를 여러 가지 다른 형식으로 변환해야 합니다

유튜브 솔루션

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

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

다양한 비디오 웹사이트의 공유 입력을 통해 내장된 HTML 코드를 찾을 수 있습니다.

예제

<embed src=#39;https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf#39;　allowFullScreen=#39;true#39;　quality=#39;high#39;　width=#39;480#39;　height=#39;400#39;　align=#39;middle#39;　allowScriptAccess=#39;always#39;　type=#39;application/x-shockwave-flash#39;></embed>

테스트해 보세요 ‹/›

히브리 링크 사용

웹 페이지에 미디어 파일을 가리키는 히브리 링크가 포함되어 있으면 대부분의 브라우저가 "보조 프로그램"을 사용하여 파일을 재생합니다.

다음 코드 스플릿은 AVI 파일을 가리키는 링크를 보여줍니다. 사용자가 링크를 클릭하면 브라우저가 "보조 프로그램"을 시작합니다. 예를 들어 Windows Media Player를 사용하여 이 AVI 파일을 재생합니다:

온라인 예제

인라인 비디오에 대한 설명

웹 페이지에 포함된 비디오는 인라인 비디오라고 합니다.

웹 애플리케이션에서 인라인 비디오를 사용할 계획이면, 많은 사람들이 인라인 비디오가 잔인하다고 생각한다는 것을 인식해야 합니다.

또한 주의해야 할 것은, 사용자가 브라우저에서 인라인 비디오 옵션을 이미 껐을 수도 있다는 것입니다.

사용자가 인라인 비디오를 보고 싶어할 때만 포함하는 것이 우리의 최선의 조언입니다. 긍정적인 예시는, 사용자가 비디오를 볼 필요가 있고 링크를 클릭할 때 페이지가 열리고 비디오가 재생되는 것입니다.

HTML 멀티미디어 태그

표签	설명
<embed>	내장 객체를 정의합니다. HTML4 비추장됩니다. HTML5 내장됩니다.
<object>	내장 객체를 정의합니다.
<param>	객체의 매개변수를 정의합니다.
<audio>HTML5	오디오 내용을 정의합니다.
<video>HTML5	비디오 또는 영화를 정의합니다.
<source>HTML5	media 요소의 멀티미디어 자원 (<video> 및 <audio>)을 정의합니다.
<track>HTML5	media 요소를 지정한 자막 파일 또는 텍스트를 포함한 다른 파일 (<video>와<audio>)

HTML 예제 모든 것 HTML 오디오(Audio)