HTML5ビデオ：フラグメント、キャプション、およびダイナミックサムネイル

この例では、 'thumbnail.jpg'はビデオのサムネイルとして使用される画像です。 html5ビデオはサムネイル画像をクリックしたときにのみ起動しますか？

サムネイル画像をクリックしたときにのみHTML5ビデオを起動するには、使用できますビデオの再生および一時停止機能を制御するJavaScript。まず、ビデオを非表示にし、サムネイル画像のみを表示する必要があります。サムネイルの画像がクリックされると、画像が隠され、ビデオが表示されて再生されます。それを行う方法の例は次のとおりです：

<script> <script><br>function playvideo（）{<br>var thumbnail = document.getElementbyid（ "sumbnail"）;<br> var video = document.getElementById（ "myvideo"）; <br> <br>sumbnail.style.display = "none";<br>video.style.display = "block";<br>video.play（）;<br>}<br></script>
この例では、 'thumbnail.jpg 「画像がクリックされ、 'playvideo（）' javascript関数が呼び出されます。この関数はサムネイルの画像を隠し、ビデオを表示し、ビデオの再生を開始します。

html5ビデオにキャプションを追加するにはどうすればよいですか？ 「ビデオ」タグの「トラック」要素。 「トラック」要素は、ビデオが再生されているときに表示される字幕、キャプションファイル、またはテキストを含むその他のファイルを指定するために使用されます。使用方法の例は次のとおりです。 🎜>

この例では、 「captions.vtt」は、ビデオのキャプションを含むファイルです。 「種類」属性はテキストトラックの種類を指定し、「srclang」はテキストトラックの言語を指定し、「ラベル」はトラックリストのタイトルを提供します。

HTML5ビデオ用の動的なサムネイルを作成するにはどうすればよいですか？

HTML5ビデオの動的サムネイルの作成には、特定の間隔でビデオからフレームをキャプチャし、サムネイルとして表示することが含まれます。これは、JavaScriptと「Canvas」要素を使用して実現できます。 「キャンバス」要素は、Webページにグラフィックを描画するために使用されます。それを行う方法の例は次のとおりです。 🎜>


<script><br>var video = document.getElementById（ "myVideo"）;<br>var canvas = document.getElementbyId（ "canvas"）; <br>var context = canvas.getContext（ "2d"）; <br><br>video.addeventlistener（ " timeUpdate "、function（）{<br>context.drawimage（video、0、0、canvas.width、 canvas.height）;<br>}）; <br> </script>
この例では、「タイムアップ」イベントが発射されるたびに、ビデオのフレームがキャンバスに描かれ、ダイナミックサムネイルが作成されます。 。


この例では、 'captions_en.vtt'および 'captions_fr.vtt'はそれぞれ英語とフランス語のキャプションを含むファイル。
HTML5ビデオの再生率は、「ビデオ」要素の「プレイバックレート」プロパティを使用して制御できます。このプロパティは、ビデオ再生の速度を設定します。たとえば、1.0の再生率は、通常の速度でビデオを再生し、0.5がハーフスピードでビデオを再生し、2.0が2倍の速度でビデオを再生します。使用方法の例は次のとおりです。 🎜>

slow down

速度up

var video = document.getElementById（ "myVideo"）;

function slowdown（）{video.playbackrate- = 0.1;
}

function speedup（）{

video.playbackrate = 0.1;

}

この例では、「slowダウン」ボタンをクリックすると再生率が0.1減少し、[スピードアップ]ボタンをクリックすると再生率が0.1増加します。 🎜>HTML5ビデオをループするには、「ビデオ」タグで「ループ」属性を使用できます。 「ループ」属性はブール属性です。存在すると、ビデオが終了するたびに、ビデオが再びやり直されることを指定します。使用方法の例は次のとおりです。

この例では、ビデオは無期限にループします。
HTML5ビデオをミュートするには、「ビデオ」タグで「Muted」属性を使用できます。 「ミュート」属性はブール属性です。存在する場合、ビデオのオーディオ出力をミュートする必要があることを指定します。使用方法の例は次のとおりです。

この例では、ビデオはオーディオミュートで再生を開始します。ビデオ？

HTML5ビデオのボリュームは、「ビデオ」要素の「ボリューム」プロパティを使用して制御できます。このプロパティは、オーディオ再生のボリュームを設定します。値は0.0〜1.0の数でなければならず、0.0はサイレント、1.0が最も大きいです。使用方法の例は次のとおりです。 🎜>

ターンダウン

ターンup

var video = document.getElementbyId（ "myvideo"）;

関数ターンダウン（）{
if（video.volume> 0.1 ）{

video.volume- = 0.1;

}

}

関数ターンアップ（）{
if （video.volume video.volume = 0.1;
}
}
}

この例では、「ターンダウン」ボタンをクリックすると、ボリュームが減少します。 0.1、および[ターンアップ]ボタンをクリックすると、ボリュームが0.1増加します。
HTML5ビデオのコントロールを表示するには、「ビデオ」タグで「コントロール」属性を使用できます。 「コントロール」属性はブール属性です。存在する場合、ビデオコントロールを表示する必要があることを指定します。これらのコントロールには、遊び/一時停止、ボリューム、フルスクリーンが含まれます。使用方法の例は次のとおりです。 🎜>
この例では、ビデオはコントロールで表示されます。

以上がHTML5ビデオ：フラグメント、キャプション、およびダイナミックサムネイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。