H5ビデオの実装と弾幕の操作方法-htmlチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-07 17:39:00

オリジナル

5791 人が閲覧しました

今回は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 字幕ファイル

実際の字幕データを含むファイルは、指定された形式 (この場合は 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);
}

ログイン後にコピー

ブラウザ対応

デフォルトでは、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 フルページプラグイン