& lt; track & gt; 요소?

& 트랙> 요소를 사용하여 비디오를위한 캡션 및 자막을 어떻게 제공 할 수 있습니까?

<track></track> 요소를 사용하여 비디오의 캡션 및 자막을 제공하려면 HTML 내의 특정 구조를 따라야합니다. <track></track> <video></video> 구현 방법은 다음과 같습니다.

1. HTML 구조 : <video></video> 요소의 자식으로 <track></track> 요소를 배치하십시오. <track></track> 요소는 비디오의 소스 요소에 배치해야합니다.

2. 속성 : <track></track> 요소는 여러 속성을 사용하여 동작 및 내용을 지정합니다.

   • kind : 텍스트 트랙의 유형을 지정합니다. 자막 및 캡션의 경우 각각 "자막"또는 "캡션"을 사용하십시오.
   • src : 실제 자막 또는 캡션이 포함 된 WebVTT 파일을 가리 킵니다.
   • srclang : 텍스트 트랙의 언어를 지정합니다. kind "자막"으로 설정된 경우 필요합니다.
   • label : 트랙에 대한 사용자가 읽을 수있는 제목을 제공합니다. 이는 브라우저가 다른 언어 또는 트랙 유형에 대한 옵션을 표시하는 데 유용합니다.
   • default : 존재하는 경우,이 속성은 사용자의 환경 설정이 다른 것을 나타내지 않는 한 트랙을 활성화해야한다고 지정합니다.

다음은 비디오에 자막과 캡션을 추가하는 방법의 예입니다.

 <code class="html"><video controls> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions" default> </track></track></source></video></code>

이 예에서 subtitles_en.vtt 및 captions_en.vtt 표시 할 실제 텍스트가 포함 된 WebVTT 파일입니다.

& 트랙> 요소를 사용하여 비디오 캡션을 사용한 접근성을 보장하기위한 모범 사례는 무엇입니까?

<track></track>

1. 여러 언어 옵션 제공 : 다양한 언어를위한 트랙을 포함하여 다양한 청중에게 수용 할 수 있습니다. srclang 속성을 사용하여 각 트랙의 언어를 지정하십시오.
2. 설명 레이블 사용 : label 속성을 사용하여 각 트랙에 대해 명확하고 설명적인 레이블을 제공하십시오. 이를 통해 사용자는 특히 여러 언어 나 트랙 유형을 사용할 수있는 경우 사용 가능한 옵션을 이해하는 데 도움이됩니다.
3. 캡션과 자막을 올바르게 구현하십시오 : 청각 장애인 또는 청각 장애인 시청자를위한 캡션에 대해 kind="captions" 사용하십시오. 여기에는 음향 효과 및 음악과 같은 비전식 요소가 포함되어야합니다. 번역 된 대화에 kind="subtitles" 사용하십시오.
4. 동기화 확인 : 캡션 및 자막의 타이밍은 오디오와 일치하도록 정확해야합니다. 이렇게하면 시청자가 쉽게 따라갈 수 있습니다.
5. 접근성 기능 : 다양한 사용자 요구를 충족시키기 위해 CSS를 통해 텍스트의 크기, 색상 및 배경을 조정하는 기능과 같은 추가 기능을 고려하십시오.
6. 테스트 : 다른 브라우저 및 장치의 캡션 및 자막을 정기적으로 테스트하여 올바르게 작동하고 모든 사용자가 액세스 할 수 있도록합니다.
7. 폴백 컨텐츠 : 어떤 이유로 든 비디오 컨텐츠에 액세스 할 수없는 사용자에게 텍스트 또는 성적표 대안을 제공합니다. 비디오 요소 내에서 연결되거나 페이지에 제공 될 수 있습니다.

HTML5 비디오에서 & 트랙> 요소를 통해 추가 된 자막 모양을 어떻게 사용자 정의합니까?

HTML5 비디오의 <track></track> 요소를 통해 추가 된 자막 모양을 사용자 정의하는 것은 일반적으로 CSS를 통해 수행됩니다. 텍스트와 배경을 스타일링하기 위해 ::cue 슈도 요소를 대상으로 할 수 있습니다. 사용자 정의를위한 단계와 예는 다음과 같습니다.

1. 큐 타겟팅 : ::cue 큐즈 유전 요소를 사용하여 트랙 내에서 텍스트를 스타일링하십시오.

2. 스타일링 옵션 : 다음 속성을 수정하여 모양을 사용자 정의 할 수 있습니다.

   • color : 텍스트 색상을 변경합니다.
   • background-color : 텍스트 상자의 배경색을 변경합니다.
   • text-shadow : 더 나은 가독성을 위해 텍스트에 그림자를 추가합니다.
   • font : 글꼴 패밀리, 크기 및 스타일을 변경합니다.

다음은 자막 모양을 사용자 정의하는 CSS의 예입니다.

 <code class="css">::cue { color: #ffffff; background-color: rgba(0, 0, 0, 0.6); font-family: Arial, sans-serif; font-size: 18px; text-shadow: 1px 1px 2px black; }</code>

이 CSS는 텍스트 색상을 흰색으로 바꾸고 반 트랜스 파트 흑인 배경을 적용하고 글꼴을 arial으로 설정하고 글꼴 크기를 늘리고 더 나은 대비를 위해 텍스트 그림자를 추가합니다.

& 트랙> 요소는 비디오 자막 및 캡션에 어떤 언어와 형식을 지원합니까?

<track></track> 요소는 비디오 자막 및 캡션의 다양한 언어와 형식을 지원합니다.

1. 언어 : <track></track> 요소는 srclang 속성에 의해 지정된 모든 인간 언어를 지원할 수 있습니다. srclang 의 가치는 유효한 BCP 47 언어 태그 여야하며, 여기에는 언어, 방언 ​​및 지역 (예 : 영어의 "EN", 프랑스어 "FR", 멕시코에서 사용되는 스페인어의 ES-MX "코드를 포함 할 수 있습니다.

2. 형식 : <track></track> 요소가 지원하는 기본 형식은 WebVTT (웹 비디오 텍스트 트랙)입니다. WebVTT는 비디오 컨텐츠와 동기화 된 타임 텍스트 트랙을 표시하기위한 간단한 텍스트 형식입니다.

   다음은 WebVTT 파일 구조의 기본 예입니다.

    <code class="vtt">WEBVTT 00:00:00.000 --> 00:00:05.000 This is the first caption. 00:00:05.001 --> 00:00:10.000 This is the second caption.</code>

   WebVTT는 가장 널리 지원되는 형식이지만 <track></track> 요소는 브라우저 확장 또는 폴리 플릴을 통해 TTML (타임 텍스트 마크 업 언어) 및 SRT (Subrip 자막)와 같은 다른 형식을 잠재적으로 지원할 수 있지만 <track></track> 요소와 직접적으로 덜 일반적으로 사용됩니다.

이러한 지침 및 관행을 따르면 <track></track> 요소를 사용하여 비디오 컨텐츠에 대한 캡션 및 자막의 접근성을 효과적으로 제공, 사용자 정의 및 보장 할 수 있습니다.

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