HTML5의 비디오 코드에 대한 자세한 설명-H5 튜토리얼-php.cn

HTML5의 비디오 코드에 대한 자세한 설명

寻∝梦

풀어 주다： 2018-08-13 18:53:01

원래의

3587명이 탐색했습니다.

이 문서에서는 주로 HTML5Video의 일부 장에 대해 설명합니다. 이는 HTML5에 대한 몇 가지 내용을 배우기에 더 적합한 HTML5Video입니다.

HTML5 비디오

많은 사이트에서 비디오를 사용합니다. HTML5는 비디오 표시를 위한 표준을 제공합니다.

웹 사이트의 동영상

지금까지는 웹 페이지에 동영상을 표시하는 것을 목표로 하는 표준이 아직 없었습니다.

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

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

브라우저 지원

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 해당 요소를 지원합니다.

참고: Internet Explorer 8 또는 이전 IE 버전은 해당 요소를 지원하지 않습니다.

HTML5(동영상) - 작동 방식

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

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

로그인 후 복사

브라우저가 HTML5 동영상 태그를 지원하지 않습니다.

요소는 동영상을 제어하기 위한 재생, 일시중지 및 볼륨 컨트롤을 제공합니다.

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

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

요소는 여러 요소를 지원하며 다양한 비디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째 인식 형식인

HTML5 - DOM을 사용하여 제어

HTML5를 사용하며 요소에는 메소드, 속성 및 이벤트도 있습니다.

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

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

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

<!DOCTYPE html> 
<html> 
<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="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">

로그인 후 복사

브라우저가 HTML5 비디오 태그를 지원하지 않습니다.

</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 Video 태그

와 같은 여러 미디어 리소스를 정의합니다. 트랙

HTML5(비디오) - 작동 방식

HTML5로 비디오를 표시하려면 다음이 필요합니다.

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

로그인 후 복사

브라우저가 HTML5 비디오 태그를 지원하지 않습니다.

요소는 동영상을 제어하기 위한 재생, 일시중지 및 볼륨 컨트롤을 제공합니다.

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

【관련 추천】

HTML의 기본 요소로 HTML을 처음부터 배울 수 있습니다.

HTML5에서는 Video 요소를 사용합니다

위 내용은 HTML5의 비디오 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!