& lt; video & gt; 꼬리표?

<video></video> 태그를 사용하여 HTML에 비디오를 포함 시키려면 다음 기본 구조를 사용할 수 있습니다.

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </source></video></code>

이 예에서 :

• width 와 height 속성은 비디오 플레이어의 크기를 정의합니다.
• controls 속성은 재생, 일시 정지 및 볼륨 컨트롤을 추가합니다.
• <video></video> 요소 내부의 <source></source> 태그는 재생할 비디오 파일을 지정합니다. src 속성은 비디오 파일을 가리키고 type 속성은 리소스의 마임 유형을 나타냅니다.
• 브라우저가 <video></video> 요소를 지원하지 않는 경우 "브라우저가 비디오 태그를 지원하지 않습니다"텍스트는 폴백 컨텐츠 역할을합니다.

크로스 브라우저 호환성을 보장하기 위해

<video></video> 태그를 사용할 때 크로스 브라우저 호환성을 보장하려면 다음의 필수 속성을 고려해야합니다.

1. SRC : 비디오 파일의 URL을 지정합니다. <video></video> 태그 에서이 속성을 직접 사용할 수 있지만 <source></source> 요소 내 에서이 속성을 사용하여 여러 비디오 형식을 제공하는 것이 좋습니다.
2. 유형 : <source></source> 요소와 함께 사용하여 비디오 파일의 마임 유형을 나타냅니다. 이를 통해 브라우저가 사용할 소스를 결정하는 데 도움이됩니다.
3. 컨트롤 : Play, Pause 및 Volume과 같은 기본 비디오 컨트롤을 추가합니다. 사용 가능성을 위해이 속성을 포함시키는 것이 좋습니다. 그러나 필요한 경우 사용자 정의 컨트롤을 설계 할 수 있습니다.
4. 너비 와 높이 : 비디오 플레이어의 크기를 설정하십시오. 비디오가로드되는 동안 레이아웃이 바뀌는 것을 방지 할 수 있습니다.
5. 예압 : 비디오를 사전로드하는 방법을 지정합니다. 옵션에는 none (예압 없음), metadata (기간과 같은 메타 데이터 만) 또는 auto (전체 비디오로드)이 포함됩니다. 이는 성능 및 사용자 경험에 영향을 줄 수 있습니다.
6. 포스터 : 비디오가 다운로드하는 동안 또는 사용자가 재생 버튼을 누르기 전까지는 표시 할 이미지를 지정합니다.

이러한 속성을 사용하면 다른 브라우저에서 비디오의 호환성을 향상시킬 수 있습니다.

<video></video> 태그가 지원하는 일반적인 비디오 형식에는 다음이 포함됩니다.

1. MP4 : 최신 브라우저에서 널리 지원됩니다. MP4 파일을 지정하려면 사용하십시오.

    <code class="html"><source src="video.mp4" type="video/mp4"></source></code>

2. Webm : Chrome, Firefox, Opera 및 Edge에서 지원합니다. Webm 파일을 지정하려면 다음을 사용하십시오.

    <code class="html"><source src="video.webm" type="video/webm"></source></code>

3. OGG : Firefox, Opera 및 일부 이전 버전의 Chrome이 지원합니다. OGG 파일을 지정하려면 다음을 사용하십시오.

    <code class="html"><source src="video.ogv" type="video/ogg"></source></code>

더 넓은 호환성을 보장하려면 <video></video> 태그 내에 여러 <source></source> 요소를 나열하여 브라우저가 첫 번째 지원되는 형식을 선택할 수 있습니다.

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> Your browser does not support the video tag. </source></source></source></video></code>

<video></video> 태그가 포함 된 비디오에 자막이나 캡션을 추가하려면 <track></track> 요소를 사용할 수 있습니다. 방법은 다음과 같습니다.

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> Your browser does not support the video tag. </track></source></video></code>

이 예에서 :

• <track></track> src
• kind 속성은 텍스트 트랙의 유형을 지정합니다. 옵션에는 subtitles , captions , descriptions , chapters 및 metadata 포함됩니다. 자막 또는 캡션의 경우 subtitles 또는 captions 사용하십시오.
• srclang 속성은 텍스트 트랙의 언어 (예 : 영어의 en )를 나타냅니다.
• label 속성은 텍스트 트랙에 대한 사용자 읽기 가능한 제목을 제공하며, 메뉴에 다른 자막을 선택할 수 있습니다.

자막 또는 캡션이 나타나는지 확인하려면 비디오 플레이어가 지원하고 (최신 브라우저) WebVTT 파일이 올바르게 형식화되어 있는지 확인하십시오. 예를 들어, 기본 webvtt 파일은 다음과 같습니다.

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000 Hello, welcome to my video! 00:00:05.001 --> 00:00:10.000 Today we'll be discussing how to use the video tag.</code>

비디오 재생 중에 지정된 시간에 해당 텍스트가 표시됩니다.

위 내용은 & lt; video & gt; 꼬리표?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!