HTML5 비디오(비디오)

동영상을 사용하는 사이트가 많습니다. HTML5는 동영상 표시에 대한 표준을 제공합니다.

웹사이트의 동영상

지금까지는 웹페이지에 동영상을 표시하는 기준이 없었습니다.

현재 대부분의 동영상은 플러그인(Flash 등)을 통해 표시됩니다. 그러나 모든 브라우저에 동일한 플러그인이 있는 것은 아닙니다.

HTML5는 video 요소를 통해 비디오를 포함하는 표준 방법을 지정합니다.

브라우저 지원

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 <video>

참고: Internet Explorer 8 이하 IE 버전은 <video> 요소를 지원하지 않습니다.

HTML5(동영상) - 작동 방식

HTML5로 동영상을 표시하려면 다음이 필요합니다.

예

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

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

</body>
</html>

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

<video> 동영상.

동시에 <video> 요소는 동영상 크기를 제어하기 위한 너비 및 높이 속성도 제공합니다. 높이와 너비가 설정되면 페이지가 표시될 때 필요한 비디오 공간이 예약됩니다. 짐을 실은. . 이러한 속성이 설정되지 않고 브라우저가 비디오의 크기를 알지 못하는 경우 브라우저는 로드 시 특정 공간을 예약할 수 없으며 페이지는 원본 비디오의 크기에 따라 변경됩니다.

<video> 및 </video> 태그 사이에 삽입된 콘텐츠는 video 요소를 지원하지 않는 브라우저에서 표시되도록 제공됩니다.

<video> 요소는 여러 개의 <source> 요소를 지원합니다. 브라우저는 첫 번째 인식 형식을 사용합니다:

비디오 형식 및 브라우저 지원

현재 <video> 요소는 MP4, WebM 및 Ogg의 세 가지 비디오 형식을 지원합니다.

MP4 = H.264 비디오 인코딩 및 AAC 오디오 인코딩이 포함된 MPEG 4 파일
WebM = VP8 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 WebM 파일
Ogg = Theora 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 Ogg 파일

비디오 형식

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - DOM을 사용한 제어

HTML5 <video> 및 <audio> 요소도 있습니다.

<video> 및 <audio> 요소의 메서드, 속성 및 이벤트는 JavaScript를 사용하여 제어할 수 있습니다.

메서드에는 재생, 일시 중지 및 로드가 포함됩니다. 속성(예: 기간, 볼륨 등)을 읽거나 설정할 수 있습니다. DOM 이벤트는 예를 들어 <video> 요소가 재생 시작, 일시 중지, 중지되었음을 알려줄 수 있습니다.

예제의 간단한 메소드는 <video> 요소를 사용하는 방법, 속성을 읽고 설정하는 방법, 메소드를 호출하는 방법을 보여줍니다.

인스턴스

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

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script> 

</body> 
</html>

인스턴스 실행»

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

자세한 내용은 HTML5 오디오/비디오 DOM 참조 매뉴얼을 참조하세요.

HTML5 비디오 태그

标签	描述
<video>	定义一个视频
<source>	定义多种媒体资源,比如 <video> 和<audio>
<track>	定义在媒体播放器文本轨迹