집 > 기사 > 웹 프론트엔드 > H5 영상 구현 및 탄막 운용 방법

H5 영상 구현 및 탄막 운용 방법

php中世界最好的语言원래의: 2018-05-07 17:39:005752검색

이번에는 H5 영상 구현 및 탄막 운용 방법을 알려드리겠습니다. H5 영상 구현 및 탄막 운용 시 주의사항은 무엇인가요? HTML5를 사용하면 요소를 사용하여 동영상의 자막을 지정할 수 있습니다. 이 요소의 다양한 속성을 사용하면 추가하는 콘텐츠 유형, 언어, 실제 자막 정보가 포함된 텍스트 파일에 대한 참조 등을 지정할 수 있습니다.

<video id="video"  controls>
    <source src="./step.mp4" type="video/mp4">
    <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default>
    <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt">
    <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt">
 </video>

track 속성 소개:

WebVTT 자막 파일

실제 자막 데이터가 포함된 파일은 지정된 형식(이 경우 WebVTT) 형식을 따르는 간단한 텍스트 파일입니다. WebVTT 플러그인 사양은 아직 개발 중이지만 주요 부분은 안정적이므로 오늘부터 사용할 수 있습니다.

Blender Foundation과 같은 비디오 제공업체는 비디오의 텍스트 형식으로 자막을 제공하지만 일반적으로 SRT(SubRip Text) 형식을 사용합니다. srt2vtt와 같은 온라인 변환기를 사용하여 WebVTT로 변환할 수 있습니다.

파일 형식 사양:

파일의 접미사는 ==.vtt==

==.vtt==파일의 MIME 유형은 text/vtt입니다.

Chrome 및 Firefox 브라우저에서는 .vtt 자막 장애물 없이 로드하고 표시할 수 있지만 IE10+ 브라우저의 경우 .vtt 자막도 지원되지만 MIME 유형을 정의해야 합니다. 그렇지 않으면 WebVTT 형식이 무시됩니다. 더 간단한 방법은 자막이 있는 폴더 아래에 .htaccess 파일을 추가하고 그 안에 AddType text/vtt .vtt를 작성하는 것입니다.

//파일 시작 부분에 선언해야 함 ==WEBVTT==

WEBVTT
// 시작 시간 --> 종료 시간(밀리초)
00:00:00.001 -->
// 위 시간에 해당하는 자막을 표시할 수 있습니다. aa는 클래스 이름과 유사합니다.
Nine Nether Yinling 1111
00:00:03.001 --> :00:06.000
모든 신과 악마 2222
00:00:06.001 --> 00:00:09.000
내 피의 몸으로 3333
00:00:09.001 --> 00:00:12.000
희생 4444
00:00:12.001 --> 00:00:15.000
三生七世5555

자막 CSS 스타일 설정

::cunone 개별 텍스트 트랙 큐를 대상으로 지정하려면 정의된 클럽과 일치하도록 스타일링하는 데 사용됩니다. 텍스트 그림자에 적용할 수 있는 CSS 속성은 다음과 같습니다.

text-꾸밈
text-shadow
line-height
white-space

WebVTT는 스타일 제어를 위해 일부 HTML 태그도 지원합니다. 일반적인 태그로는 sound ==v== 태그, color ==c== 태그, 굵은 글씨 ==b== 태그, 기울임꼴 ==i== 태그, 밑줄이 있습니다. ==u== 태그, ==ruby== 및 ==lang== 태그 등

//设置字幕的样式
video::cue{
    background-color:transparent;
    color:white;
    font-size:20px;
    line-height: 100px;
}
// 设置单行字幕的样式 
video::cue(v[voice=aa]){
    color:green;
}
video::cue(v[voice=bb]){
    color:rgb(0, 26, 128);
}

브라우저 호환

기본적으로 Internet Explorer 10+ 자막이 활성화되어 있으며 기본 컨트롤에는 방금 만든 메뉴와 동일한 기능을 제공하는 버튼과 메뉴가 포함되어 있습니다. 기본 속성도 지원됩니다.

== 참고: MIME 유형을 정의하지 않으면 IE는 WebVTT 파일을 완전히 무시합니다. AddType text/vtt가 포함된 적절한 디렉토리에 .htaccess 파일을 추가하면 쉽게 수행할 수 있습니다. .vtt==

Safari

Safari 6.1+는 Internet Explorer 10+에 대해 유사한 지원을 제공하며 다양한 사용 가능한 옵션이 있는 메뉴를 표시합니다. 브라우저가 선택할 수 있도록 "자동" 옵션을 추가했습니다.

Chrome 및 Opera

이러한 브라우저는 구현 방식이 유사합니다. 자막은 기본적으로 활성화되어 있으며 기본 컨트롤 세트에는 자막을 켜고 끄는 'cc' 버튼이 포함되어 있습니다. Chrome과 Opera는 기본 요소의 속성을 무시하고 대신 브라우저의 언어를 자막의 언어와 일치시키려고 노력합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 확인하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!