> 웹 프론트엔드 > HTML 튜토리얼 > HTML5 튜토리얼-비디오

HTML5 튜토리얼-비디오

黄舟
풀어 주다: 2016-12-27 15:29:07
원래의
1714명이 탐색했습니다.

안녕하세요 여러분, HTML5는 지난 10년 동안 웹 프런트엔드 개발에 있어 큰 도약을 이루었습니다. 이전 버전과 달리 HTML 5는 웹 콘텐츠를 표현하는 데에만 사용되지 않습니다. HTML 5 플랫폼에서는 비디오, 오디오, 이미지, 컴퓨터 기반 상호 작용이 표준화됩니다. .

다음으로는 HTML5 튜토리얼 영상을 소개해드리겠습니다.

많은 트렌디한 웹사이트에서 동영상을 제공합니다. HTML5는 비디오 표시에 대한 표준을 제공합니다.

웹상의 동영상

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

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

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

비디오 형식

현재 비디오 요소는 세 가지 비디오 형식을 지원합니다:

HTML5 튜토리얼-비디오

Ogg: Theora 비디오 인코딩 및 Vorbis 오디오 인코딩 Ogg

MPEG4: H.264 비디오 인코딩 및 AAC 오디오 인코딩이 포함된 MPEG 4 파일

WebM: VP8 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 WebM 파일.

작동 방식

HTML5로 동영상을 표시하려면

<video src=”movie.ogg” controls=”controls”>
</video>
로그인 후 복사

재생, 일시 정지 및 볼륨 컨트롤을 추가하는 컨트롤 속성만 있으면 됩니다.

너비와 높이 속성을 포함하는 것도 좋은 생각입니다.

사이에 삽입된 콘텐츠는 표시할 비디오 요소를 지원하지 않는 브라우저용입니다.

예:

<video src=”movie.ogg” width=”320″ height=”240″ controls=”controls”>
Your browser does not support the video tag.
</video>
로그인 후 복사

위의 예는 Ogg 파일을 사용하며 Firefox, Opera 및 Chrome 브라우저에 적합합니다.

Safari에서 작동하려면 비디오 파일이 MPEG4 형식이어야 합니다.

동영상 요소는 여러 소스 요소를 허용합니다. 소스 요소는 다양한 비디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째 인식 형식을 사용합니다:

예:

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>
로그인 후 복사

Internet Explorer

Internet Explorer 8은 비디오 요소를 지원하지 않습니다. IE 9에서는 MPEG4를 사용하는 비디오 요소가 지원됩니다.

HTML5 튜토리얼-비디오

위 내용은 HTML5 튜토리얼 영상 내용입니다. PHP 중국어 웹사이트(www.php .cn)!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿