ホームページ > 記事 > ウェブフロントエンド > HTML5の動画コードを詳しく解説
HTML5の動画コードを詳しく解説
- 寻∝梦オリジナル
- 2018-08-13 18:53:013608ブラウズ
この記事では主に 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 サイトの他の関連記事を参照してください。