検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >H5ビデオの実装と弾幕の操作方法

H5ビデオの実装と弾幕の操作方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-07 17:39:005793ブラウズ

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

    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

  • == 注::: 現在の手掛かりスタイルChrome 、Opera、Safari では動作しますが、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 以降も同様にサポートされており、利用可能なさまざまなオプションを含むメニューが表示されます。ブラウザが選択できるようにする「自動」オプションを追加しました。

    Chrome と Opera

    これらのブラウザには同様の実装があり、字幕はデフォルトで有効になっており、デフォルトのコントロール セットには字幕のオンとオフを切り替える 'cc' ボタンが含まれています。 Chrome と Opera は、デフォルト要素の属性を無視し、代わりにブラウザーの言語と字幕の言語を一致させようとします

    この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

    推奨読書:

    Vue.js を使用して mpvue フレームワークを開発する手順の詳細な説明

    著作権関連のヘッダーと末尾を追加するための jquery フルページ プラグイン

    • 以上がH5ビデオの実装と弾幕の操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：H5での録音・再生の操作方法次の記事：H5での録音・再生の操作方法

    関連記事

    続きを見る