ホームページ > 記事 > ウェブフロントエンド > HTML5の動画コードを詳しく解説
この記事では主に HTML5Video のいくつかの章について説明します。初心者が HTML5 について学ぶのに適しています。この要素の構造を試してみましょう。
HTML5 ビデオ
多くのサイトではビデオを表示するための標準を提供しています。
Web サイト上のビデオ
これまで、Web ページ上にビデオを表示するための標準はまだありませんでした。
現在、ほとんどのビデオはプラグイン (Flash など) を介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。
HTML5 は、video 要素を介してビデオを含める標準的な方法を指定します。
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はこの要素をサポートします。
注: Internet Explorer 8 以前の IE バージョンはこの要素をサポートしていません。
HTML5 (ビデオ) - 仕組み
HTML5 でビデオを表示するには、次のことが必要です:
<!DOCTYPE html> <html> <head> <title>PHP中文网</title> </head> <body> <video width="320" height="240" controls> <source src="/statics/demosource/movie.mp4" type="video/mp4"> <source src="/statics/demosource/movie.ogg" type="video/ogg">
お使いのブラウザは HTML5 video タグをサポートしていません。
a6a9c6d3f311dabb528ad355798dc27d
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
要素は、ビデオを制御するための再生、一時停止、および音量のコントロールを提供します。
同時に、 element 要素はビデオのサイズを制御する幅と高さの属性も提供します。高さと幅が設定されている場合、ページが読み込まれるときに必要なビデオ領域が予約されます。 。これらのプロパティが設定されておらず、ブラウザーがビデオのサイズを認識していない場合、ブラウザーは読み込み時に特定のスペースを予約できず、ページは元のビデオのサイズに基づいて変更されます。
と タグの間に挿入されたコンテンツは、video 要素をサポートしていないブラウザでの表示用に提供されています。
Element は複数の要素をサポートしており、異なるビデオ ファイルをリンクできます。ブラウザは最初に認識された形式を使用します:
HTML5 - DOM を使用して制御されます
HTML5 と要素にはメソッド、プロパティ、イベントもあります。
要素のメソッド、プロパティ、イベントは JavaScript を使用して制御できます。
メソッドには、再生、一時停止、ロードなどが含まれます。プロパティ (期間、音量など) を読み取りまたは設定できます。 DOM イベントは、たとえば、要素の再生開始、一時停止、停止などを通知できます。
この例の簡単なメソッドは、要素の使用方法、属性の読み取りと設定、メソッドの呼び出し方法を示しています。
<!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">缩小</button> <button onclick="makeNormal()">普通</button> <br> <video id="video1" width="420"> <source src="/statics/demosource/mov_bbb.mp4" type="video/mp4"> <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">
お使いのブラウザは HTML5 video タグをサポートしていません。
</video> </div> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
HTML5 ビデオタグ
39000f942b2545a5315c57fa3276f220 はビデオを定義します
e02da388656c3265154666b7c71a8ddc は
HTML5 (ビデオ) - 仕組み
HTML5 でビデオを表示するには、次のことが必要です:
<!DOCTYPE html> <html> <head> <title>PHP中文网</title> </head> <body> <video width="320" height="240" controls> <source src="/statics/demosource/movie.mp4" type="video/mp4"> <source src="/statics/demosource/movie.ogg" type="video/ogg">
お使いのブラウザは HTML5 video タグをサポートしていません。
a6a9c6d3f311dabb528ad355798dc27d
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
要素は、ビデオを制御するための再生、一時停止、および音量のコントロールを提供します。
同時に、 element 要素はビデオのサイズを制御する幅と高さの属性も提供します。高さと幅が設定されている場合、ページが読み込まれるときに必要なビデオ領域が予約されます。 。これらのプロパティが設定されておらず、ブラウザーがビデオのサイズを認識していない場合、ブラウザーは読み込み時に特定のスペースを予約できず、ページは元のビデオのサイズに基づいて変更されます。
と タグの間に挿入されたコンテンツは、video 要素をサポートしていないブラウザでの表示用に提供されています。
【関連おすすめ】
以上がHTML5の動画コードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。