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: ブラウザーがファイル全体を自動的にダウンロードすることを示します
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 サイトの他の関連記事を参照してください。