HTML 비디오(비디오)


HTML로 동영상을 재생하는 방법은 다양합니다.

HTML 비디오(동영상) 재생

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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로 동영상을 재생하는 것은 쉽지 않습니다!

동영상 파일이 모든 브라우저(Internet Explorer, Chrome, Firefox, Safari, Opera) 및 모든 하드웨어(PC, Mac, iPad, iPhone)에서 작동하는지 확인하려면 많은 요령을 알아야 합니다. .

이 장에서는 W3Cschool이 여러분을 위한 문제와 해결책을 요약합니다.

<embed> 태그 사용

<embed> 태그는 HTML 페이지에 멀티미디어 요소를 삽입하는 데 사용됩니다.

다음 HTML 코드는 웹 페이지에 포함된 Flash 비디오를 표시합니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>Playing the Object</h2>

<embed src="intro.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

문제

  • HTML4가 인식하지 못합니다. <삽입> 귀하의 페이지는 인증을 통과할 수 없습니다.

  • 플래시를 지원하지 않는 브라우저에서는 동영상이 재생되지 않습니다.

  • 아이패드와 아이폰에서는 플래시 동영상을 표시할 수 없습니다.

  • 동영상을 다른 형식으로 변환해도 모든 브라우저에서 재생되지 않습니다.

<object> 태그 사용

<object> 태그는 HTML 페이지에 멀티미디어 요소를 삽입하는 데 사용됩니다.

다음 HTML 조각은 웹 페이지에 포함된 Flash 비디오를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

</body>
</html>

Running Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

문제:

  • 브라우저에서 작동하는 경우 플래시를 지원하지 않으면 동영상 재생이 작동하지 않습니다.

  • iPad와 iPhone은 Flash 비디오를 표시할 수 없습니다.

  • 동영상을 다른 형식으로 변환해도 모든 브라우저에서 재생되지 않습니다.

HTML5 <video> 요소를 사용하세요.

HTML5 <video> 태그는 동영상 또는 동영상을 정의합니다.

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

다음 HTML 스니펫은 웹 페이지에 포함된 ogg, mp4 또는 webm 형식의 비디오를 표시합니다.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

문제:

  • 동영상을 다양한 형식으로 변환해야 합니다.

  • <video> 요소는 이전 브라우저에서 유효하지 않습니다.

최고의 HTML 솔루션

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

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

문제:

  • 동영상을 다양한 형식으로 변환해야 합니다

Youku Solution의 솔루션

HTML로 비디오를 표시하는 가장 쉬운 방법은 Youku와 같은 비디오 웹사이트를 사용하는 것입니다.

웹 페이지에서 동영상을 재생하려면 Youku와 같은 동영상 웹사이트에 동영상을 업로드한 다음 웹 페이지에 HTML 코드를 삽입하여 동영상을 재생할 수 있습니다.

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

하이퍼링크 사용

웹 페이지에 미디어 파일에 대한 하이퍼링크가 포함된 경우 대부분의 브라우저는 "도우미 애플리케이션"을 사용하여 파일을 재생합니다.

다음 코드 조각은 AVI 파일에 대한 링크를 표시합니다. 사용자가 링크를 클릭하면 브라우저는 Windows Media Player와 같은 "도우미 응용 프로그램"을 실행하여 AVI 파일을 재생합니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>点击这个链接打开查看</h2>

<a href="intro.swf">播放视频文件</a> 

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


인라인 동영상에 대한 참고 사항

웹 페이지에 동영상이 포함된 경우 이를 인라인 동영상이라고 합니다.

웹 애플리케이션에서 인라인 비디오를 사용할 계획이라면 많은 사람들이 인라인 비디오를 불편하게 여긴다는 점을 염두에 두어야 합니다.

또한 사용자가 브라우저에서 인라인 비디오 옵션을 꺼두었을 수도 있다는 점에 유의하세요.

가장 좋은 조언은 사용자가 볼 것으로 예상되는 위치에만 인라인 동영상을 포함하라는 것입니다. 긍정적인 예는 사용자가 비디오를 보아야 할 때 링크를 클릭하면 페이지가 열리고 비디오가 재생되는 경우입니다.

HTML 멀티미디어 태그

신규: HTML5 새 태그.

< td>미디어 요소를 정의하는 멀티미디어 리소스(<video> 및 <audio>)
태그설명
<embed>삽입된 개체를 정의합니다. HTML4에서는 더 이상 사용되지 않으며 HTML5에서는 허용됩니다.
<object>삽입된 개체를 정의합니다.
<param>객체의 매개변수를 정의합니다.
<audio>
标签描述
<embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>定义内嵌对象。
<param>定义对象的参数。
<audio>定义了声音内容
<video>定义一个视频或者影片
<source>定义了media元素的多媒体资源(<video> 和 <audio>)
<track>规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)
사운드 콘텐츠 정의
<video>동영상 또는 영화 정의
<source><🎜>
<track><🎜> 미디어 요소(<video> 및 <audio>)에 대한 텍스트가 포함된 자막 파일이나 기타 파일을 지정하세요.
<🎜>
←