HTML5ビデオ字幕の使用方法と作成方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5ビデオ字幕の使用方法と作成方法

不言

May 04, 2018 pm 04:23 PM

h5 html5 video

この記事では、主に HTML5 ビデオの字幕の使用と作成について紹介します。HTML5 では、要素を使用してビデオの字幕を指定できます。必要な友達はそれを参照してください。

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属性の紹介:

kindには、ファイルに含まれるコンテンツのタイプを示す値subtitlesが割り当てられます
labelには、字幕セットに使用される言語を示す値が割り当てられます- たとえば、英語やドイツ語 - これらのタグはユーザーインターフェイスに表示され、ユーザーが見たい字幕言語を簡単に選択できるようになります。
src には、それぞれの場合に、関連する WebVTT 字幕ファイルを指す有効な URL が割り当てられます。
srclang は、各字幕ファイルのコンテンツが存在する言語を示します。
デフォルト属性は English 要素に設定され、これが字幕がオンになっており、ユーザーが特定の選択を行っていない場合に使用されるデフォルトの字幕ファイル定義であることをブラウザーに示します。

WebVTT 字幕ファイル

実際の字幕データを含むファイルは、指定された形式 (この場合は Web ビデオテキストトラック (WebVTT) 形式) に従った単純なテキストファイルです。 WebVTT プラグインの仕様はまだ開発中ですが、主要な部分は安定しているため、今日から使用できます。

Blender Foundation などのビデオプロバイダーは、ビデオのテキスト形式で字幕とサブタイトルを提供しますが、通常は SubRip Text (SRT) 形式で提供されます。これらは、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 --> 00:00:03.000
// 上記の時間に対応する字幕を表示します。 aa はクラス名と同様に設定できます
Nine Nether yingling 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
Sacrifice 4444
00:00:12.001 --> 00:00:15.000
三生七世5555

字幕CSSスタイル設定

::cue 疑似コンポーネントの鍵は個々のテキストトラックキューをターゲットにします。定義されたクラブに一致するため、スタイル設定に使用されます。テキストヒントに適用できる CSS プロパティは次のとおりです。

バックグラウンドメモリパフォーマンス

アウトラインの省略表現プロパティ
フォントの省略表現プロパティ
line-height
white-space
== 注: ::cue の手がかりスタイルは現在、Chrome、Opera、およびSafari、ただし Chrome ではまだ利用できません。Firefox で使用されます。 ==
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);
}

ログイン後にコピー

IE
デフォルトでは、Internet Explorer 10 以降の字幕が有効になっており、デフォルトコントロールには、先ほど作成した機能と同じメニューを提供するボタンとメニューが含まれています。デフォルト属性もサポートされています。
== 注: MIME タイプを定義しない限り、IE は WebVTT ファイルを完全に無視します。これは、AddType text/vtt .vtt==
Safari を含む適切なディレクトリに .htaccess ファイルを追加することで簡単に実行できます。
Safari 6.1 以降では、Internet Explorer 10 以降も同様にサポートされており、利用可能なさまざまなオプションを含むメニューが表示されます。ブラウザが選択できるようにする「自動」オプションを追加しました。