HTML5でのvideoタグの使い方

HTML5 の video タグは、動画ファイルの再生に使用されます。video タグでは、ウィンドウの幅と高さ、動画の自動再生、ループ再生、動画のカバー画像などを設定できます。

##HTML5 は次の世代です。第一世代の HTML では、多くの新しいタグが追加され、多くの新しい機能が実装されました。また、外部プラグインの必要性が減り、エラーの処理が改善されます。たとえば、HTML5 の video タグは、ページ上でビデオを再生する効果を効果的に実現できます。次の記事では、一定の参考効果があるvideoタグの詳しい使い方を紹介していきますので、ご参考になれば幸いです。

[おすすめコース:

HTML5 チュートリアル

]

HTML5 ビデオ タグの詳細な使用法 はビデオ ファイルの再生に使用され、映画やその他のビデオ ストリームなど。開始タグと終了タグの間にテキスト コンテンツを配置できる利点は、一部の以前のバージョンのブラウザでは、タグがサポートされていないという情報を表示できることです。

<video src="movie01.mp4" controls></video>

幅と高さの定義

このビデオの幅と高さをカスタマイズして、ウィンドウ サイズを変更できます

<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>

レンダリング:

自動再生
ビデオの自動再生を有効にするプロパティを設定できます

(1) autoplay 属性を使用して、ブラウザがビデオ ファイルをロードした直後に再生できるようにします

<video width="400"    style="max-width:90%" controls autoplay>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

自動再生中にミュート状態を設定することもできます。この目的は、ビデオが自動的に再生されるときにサウンドがミュートになることです。プレーヤーのスピーカーをクリックしてサウンドをオンにすることもできます。

<video width="400" height="300" controls autoplay muted>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

レンダリング:

ループ再生

loop 属性を使用すると、ビデオの終了時に最初からループ再生することができます。コードは次のとおりです。

<video width="400"    style="max-width:90%" controls loop>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

メディア ファイルのプリロード

プリロード属性に異なる属性値を設定して、ブラウザにメディア ファイルのロード方法を指示します: auto: ブラウザーがファイル全体を自動的にダウンロードすることを示します

none: ブラウザーが事前にファイルをダウンロードする必要がないことを示します

metadata: ブラウザーが最初にファイルを取得することを示しますビデオ ファイルの先頭にあるデータ ブロック。これは、いくつかの基本情報 (ビデオの合計時間、画像の最初のフレームなど) を決定するのに十分です。

<video width="400"    style="max-width:90%" controls preload="auto">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Setビデオのカバー画像

#ビデオは、ポスター属性のカバー画像を通じて設定できます。ブラウザは、次の 3 つの状況でこの画像を使用します。

(1) 最初のビデオのフレームがロードされていません

(2) preload 属性を none に設定します

(3) 指定されたビデオ ファイルが見つかりませんでした

<video width="400" height="300" controls preload="none" poster="images/5.jpg">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

レンダリング中:

概要: この記事は以上です。この記事が皆さんに video タグの使い方を学ぶのに役立つことを願っています。

以上がHTML5でのvideoタグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。