HTML의 비디오 요소 자세히 살펴보기

HTML의 비디오 태그에 대한 자세한 설명

HTML5의 비디오 태그는 웹 페이지에서 비디오를 재생하는 데 사용되는 태그입니다. MP4, WebM, Ogg 등과 같은 다양한 형식을 사용하여 비디오를 렌더링할 수 있습니다. 이번 글에서는 video 태그의 사용법을 자세히 소개하고 구체적인 코드 예시를 제공하겠습니다.

1. 기본 구조
   비디오 태그의 기본 구조는 다음과 같습니다.

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

위의 예에서는 비디오 파일(video.mp4)에 대한 경로를 지정하고 컨트롤 속성을 추가하여 비디오 위에 컨트롤을 표시했습니다. 버튼(재생, 일시 정지, 볼륨 조절 등). 브라우저가 비디오 태그를 지원하지 않으면 대체 콘텐츠가 표시됩니다(귀하의 브라우저는 비디오 태그를 지원하지 않습니다).

2. 속성에 대한 자세한 설명
   2.1 src 속성
   src 속성은 동영상 파일의 경로를 지정하는 데 사용됩니다. 상대 경로나 절대 경로를 사용할 수 있습니다. 예:

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

2.2 컨트롤 속성
컨트롤 속성은 동영상의 컨트롤 버튼을 표시하는 데 사용됩니다. 예:

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

2.3 너비 및 높이 속성
너비 및 높이 속성을 사용하여 비디오의 너비와 높이를 맞춤설정하세요. 예:

<video src="video.mp4" width="640" height="360">
</video>

2.4 autoplay 속성
autoplay 속성을 사용하여 비디오가 자동으로 재생되도록 설정하세요. 예:

<video src="video.mp4" autoplay>
</video>

2.5 루프 속성
루프 속성을 사용하여 비디오를 루프로 설정하세요. 예:

<video src="video.mp4" loop>
</video>

2.6 muted 속성
muted 속성을 사용하여 동영상이 무음으로 재생되도록 설정하세요. 예:

<video src="video.mp4" muted>
</video>

3. 지원되는 비디오 형식
   비디오 태그는 여러 비디오 형식을 지원하지만 브라우저마다 지원하는 형식이 다를 수 있습니다. 다음은 일반적으로 사용되는 일부 비디오 형식 및 해당 브라우저 지원입니다.

• MP4: 대부분의 브라우저에서 지원
• WebM: 대부분의 최신 브라우저에서 지원
• Ogg: Firefox, Chrome 및 기타 브라우저에서 지원

비디오가 다양한 플랫폼과 브라우저에서 제대로 재생되는지 확인하려면 동시에 여러 형식의 비디오 소스를 제공하는 것이 가장 좋습니다.

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. 임베디드 자막
   트랙 태그를 사용하여 비디오에 자막 파일을 삽입할 수 있습니다. 꼬리표. 예:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en">
  Your browser does not support the video tag.
</video>

위 예에서는 트랙 태그를 사용하여 자막 파일(subtitles.vtt)을 삽입하고 관련 매개변수(kind, label, srclang)를 추가했습니다.

요약:
비디오 태그를 사용하면 웹 페이지에 비디오를 쉽게 삽입하고 재생할 수 있습니다. 다양한 속성을 사용하여 비디오의 자동 재생, 반복, 음소거 및 기타 동작을 제어할 수 있습니다. 비디오 호환성을 보장하려면 동시에 여러 형식의 비디오 소스를 제공하는 것이 가장 좋습니다. 또한, track 태그를 사용하여 자막 파일을 삽입할 수도 있습니다.

이 글의 소개를 통해 독자들은 비디오 태그에 대해 더 깊이 이해하고 자신의 웹 페이지에 효과적으로 적용할 수 있다고 믿습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 HTML의 비디오 요소 자세히 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!