ホームページ > 記事 > ウェブフロントエンド > H5ビデオの実装と弾幕の操作方法
今回は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の属性の紹介:
実際の字幕データを含むファイルは、指定された形式 (この場合は 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字幕CSSスタイル設定// 開始時刻 --> 終了時刻 (ミリ秒単位)
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
::cue 疑似コンポーネントの鍵は個々のテキスト トラック キューをターゲットにします。定義されたクラブに一致するため、スタイル設定に使用されます。テキストのシャドウに適用できる CSS プロパティはいくつかのみです。
//设置字幕的样式 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 .vtt==
Safari を含む適切なディレクトリに .htaccess ファイルを追加することで簡単に実行できます。
Safari 6.1 以降では、Internet Explorer 10 以降も同様にサポートされており、利用可能なさまざまなオプションを含むメニューが表示されます。ブラウザが選択できるようにする「自動」オプションを追加しました。
Chrome と Opera
これらのブラウザには同様の実装があり、字幕はデフォルトで有効になっており、デフォルトのコントロール セットには字幕のオンとオフを切り替える 'cc' ボタンが含まれています。 Chrome と Opera は、デフォルト要素の属性を無視し、代わりにブラウザーの言語と字幕の言語を一致させようとします
この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
以上がH5ビデオの実装と弾幕の操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。