HTML5에서 비디오 태그를 사용하는 방법

HTML5의 비디오 태그는 비디오 파일을 재생하는 데 사용됩니다. 비디오 태그에서는 창의 너비와 높이, 비디오 자동 재생, 반복 재생, 비디오 표지 이미지 등을 설정할 수 있습니다.

HTML5는 많은 새로운 기능을 구현하는 새로운 태그가 추가된 차세대 HTML입니다. 또한 외부 플러그인의 필요성이 줄어들고 오류를 더 잘 처리합니다. 예를 들어 HTML5의 비디오 태그는 페이지에서 비디오를 재생하는 효과를 효과적으로 얻을 수 있습니다. 다음 글에서는 확실한 참고 효과가 있는 동영상 태그 사용법을 자세히 소개해드리겠습니다.

[추천 과정: HTML5 튜토리얼 ]

HTML5 비디오 태그 자세한 사용법

영화나 기타 비디오 스트림과 같은 비디오 파일을 재생하는 데 사용됩니다. 텍스트 콘텐츠는 시작 태그와 종료 태그 사이에 배치될 수 있습니다. 이 방법의 장점은 일부 하위 버전 브라우저에서 태그를 지원하지 않는 정보를 표시할 수 있다는 것입니다.

예:

<video src="movie01.mp4" controls></video>

너비 및 높이 정의

이 비디오의 너비와 높이를 맞춤 설정하여 창 크기를 변경할 수 있습니다

<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>

Rendering:

Autoplay

비디오가 자동 재생을 켤 수 있도록 속성을 설정할 수 있습니다

( 1) 자동 재생 속성을 사용하면 브라우저가 비디오 파일을 로드한 후 즉시 재생할 수 있습니다.

<video width="400" height="300" controls autoplay>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

자동 재생 중에 음소거 상태를 설정할 수도 있습니다. 이 목적은 비디오가 자동으로 재생될 때 음소거하는 것입니다. 플레이어의 스피커를 클릭하면 소리를 켤 수 있습니다.

<video width="400" height="300" controls autoplay muted>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Rendering:

Loop play
loop 속성을 사용하여 비디오 재생을 종료하고 처음부터 반복할 수 있습니다. 코드는 다음과 같습니다

<video width="400" height="300" controls loop>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

미디어 파일 미리 로드

preload 속성에 다른 속성 값을 설정하여 브라우저에 미디어 파일 로드 방법을 알려줍니다.

auto: 브라우저가 자동으로 전체 파일을 다운로드하도록 하는 것을 의미합니다.

none : 브라우저가 미리 파일을 다운로드할 필요가 없음을 나타냅니다.

metadata: 브라우저가 먼저 비디오 파일의 시작 부분에서 일부 기본 정보(예: 동영상의 전체 재생 시간, 이미지의 첫 번째 프레임 등)

<video width="400" height="300" controls preload="auto">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

설정 동영상의 표지 이미지

동영상의 표지 이미지는 포스터 속성을 통해 설정할 수 있습니다. 다음 세 가지 상황에서:

(1) 비디오의 첫 번째 프레임이 로드되지 않았습니다.

(2) preload 속성이 없음으로 설정되었습니다.

(3) 지정된 비디오 파일을 찾을 수 없습니다

<video width="400" height="300" controls preload="none" poster="images/5.jpg">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

렌더링:

요약: 위의 내용이 이 기사의 전체 내용입니다. 이 기사가 모든 사람이 비디오 태그 사용을 배우는 데 도움이 되기를 바랍니다.

위 내용은 HTML5에서 비디오 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!