HTML5のビデオ制作、ビデオ字幕の使用

ビデオフォーマットのため、ビデオのサポート:

次は3つの最も一般的に使用される形式です

1、OGG形式:(無料)+とTheoraのビデオエンコーディングのOgg Vorbisのオーディオファイルはエンコード(無料)

対応ブラウザ:Firefoxの、クローム、オペラ

 2、MPEG4フォーマット:H.264ビデオでは、コーディング(有料)+ AAC MPEG4エンコードされたオーディオファイル(有料)

サファリ、クローム:ブラウザサポート

 3、WebMの形式:VP8ビデオコーディング(無料)付きの+ VorbisのオーディオエンコードフォーマットWebMの(無料)は、

ブラウザのサポート:IE、Firefoxの、クロムを、オペラの

利点:すべての自由、より良い圧縮(小)、優れたビデオ品質の

短所:少し小さいビデオトランスコーダは、コードを改善しません

 

第二に、ビデオプロパティコードタグ:ボールド属性タグが使用されています

プロパティ

機能説明

コントロール

コントロール

再生コントロールを表示するかどうか

自動再生

自動再生

自動的に設定し、それがブラウザになっているときに再生

Pilex(ピクセル)

プレイヤーの幅を設定します。

高さ

Pilex(ピクセル)

プレイヤーの高さを設定します。

ループ

ループ

ビデオループ(すなわち、再生後に再生を続ける)かどうかを設定します

プリロード

プリロード

そして、他の設定は、読み込みが完了してから再生しています

SRC

URL

動画を再生するには、URLアドレスを設定します

ポスター

imgurl

プレイヤー初期のデフォルト表示画像を設定します

自動バッファ

自動バッファ

ブラウザのキャッシュモードを設定し、autoply有効に設定しないでください

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三、ソースコードラベル:

SRC:ビデオパスを指定する

ビデオの形式を指定します。type

四、トラックキャプションラベルのプロパティコード:

プロパティ 説明

種類

:唯一の5のあるキャプションコンテンツタイプ、定義  字幕、  キャプション、  説明、  、  メタデータを

SRC

字幕ファイルのURLアドレス

srclang

字幕ファイルの言語の種類、情報の役割を識別し、プレイヤーは、このプロパティを使用していません。

ラベル

字幕ラベル、字幕を切り替えたときに表示される固有の非反復ラベル名を提供するのに必要な各サブタイトルエレメント。

デフォルト

デフォルトの字幕かどうかを指定します。それぞれが指定されていない場合は、自動的に字幕が表示されません。

 

 

 

 

 

 

 

 

 

 

インターネットサフィックスは珍しいVTT形式のキャプションファイル、共通またはSRT形式で、ここではSRT字幕ファイル形式のVTTのフォーマットを提供するために変換されます。https://atelier.u-sub.net/srt2vtt/

動画ファイルの場合、あなたはあなた自身のオンラインを作ることができます。また、あなたはネットワークに関連するリソースを見つけるために行くことができます。Https://www.zhangxinxu.com/sp/webvtt.html

.vttファイル形式説明:UTF-8です単純なテキストファイルのファイル拡張子を.vttするエンコーディング。あなたが書いていない場合は.vtt字幕ファイルを開始WEBVTTを字幕ファイルが正常にビデオにロードされない

ようにファイルの内容として、単一または複数の行することができヒントが含ま  

 1 WEBVTT 
 2 
:00:18.930 - :00:> 00 00.160 3 100 
4 
5 ねえ、これはビジネスを作成することである
 6 
:00:7 200 18.930 - > 00:00:22.490 
8 私とあなたである
 9とあなたの愛の生活。

 

第五に、映像と字幕表示の例を行います。

1 <!DOCTYPE HTML>
 2 <HTML>
 3 <ヘッド>
 4      <スタイル>
 5          ビデオ::キュー{
 6                  バックグラウンドの色:透明;
7                    色:白。
8                   font- サイズ:20ピクセル;
9                   ライン- 高さ:100pxに。
10  }
 11      </スタイル>
 12 </ HEAD>
 13 <body>
 14  
15 <ビデオコントロール= "コントロール">
 16      <ソースSRC = "黑客军团第一季1.mp4" TYPE = "ビデオ/ MP4" />
 17     <トラックSRC = "a.vtt"ラベル= "中文" srclang = "ZH"種類= "字幕" デフォルト />
 18      <トラックSRC = "b.vtt"ラベル= "英語" srclang = "EN"種類=」字幕」/>
 19 </ビデオ>
 20 </ BODY>
 21 </ HTML>

 

おすすめ

転載: www.cnblogs.com/jing-tian/p/10930085.html