HTML5ビデオ(ビデオ)
Video タグの紹介
ほとんどのユーザーはすでに Flash プラグインをインストールしています (実際、全インターネット ユーザーの約 95% が何らかのバージョンの Flash をインストールしています)。しかし、HTML 5 の支持者は、Flash プラグインをインストールしないオープンなプラグインを求めています。どのプラグインにもビデオ規(guī)格は必要ありません。これは、HTML 5 の新しい <video> タグによってもたらされたアイデアであり、Flash などの獨(dú)自のプラグインを必要とせずにビデオを埋め込む (および操作する) 方法を提供します。
これまで、Web ページにビデオを表示するための標(biāo)準(zhǔn)はまだありませんでした。
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari は <video> 要素をサポートします。
注: Internet Explorer 8 以前の IE バージョンは <video> 要素をサポートしません。
Video タグの使用法
Video タグには、src、poster、preload、autoplay、loop、controls、width、height などのいくつかの屬性と、內(nèi)部で使用されるタグ <source> が含まれています。 <source> タグに加えて、指定されたビデオが再生できない場合に返されるコンテンツを Video タグに含めることもできます。
(1) src屬性とposter屬性
src屬性が何に使われるかは想像できると思います。 <img> タグと同様に、この屬性はビデオのアドレスを指定するために使用されます。 ｐｏｓｔｅｒ?qū)傩预?、現(xiàn)在のビデオデータが無効な場合に表示する畫像（プレビュー畫像）を指定するために使用される。無効なビデオ データは、ビデオがロード中であること、ビデオ アドレスが正しくないことなどを意味する可能性があります。
(2) preload 屬性
この屬性は、ビデオがプリロードされるかどうかを定義するために使用されます。この屬性には、none、metadata、auto の 3 つのオプションの値があります。この屬性が使用されない場合、デフォルトは auto です。
なし: プリロードはありません。この屬性値を使用すると、ユーザーがこのビデオを期待していないとページ作成者が判斷したり、HTTP リクエストを削減したりすることができます。
メタデータ: 部分的にプリロードされています。この屬性値を使用することは、ユーザーがこのビデオを期待していないとページ作成者が信じていることを意味しますが、ユーザーに何らかのメタデータ (サイズ、最初のフレーム、トラック リスト、再生時間など) を提供します。
自動: すべてプリロードされています。
(3) autoplay 屬性
も名前を見れば用途が分かる屬性です。 Autoplay 屬性は、ビデオを自動的に再生するかどうかを設(shè)定するために使用されます。これはブール型の屬性です。表示されている場合は、自動再生されていないことを意味します。
HTMLのブール屬性の値はtrueとfalseではないことに注意してください。正しい使用方法は、この屬性をタグ內(nèi)で使用して true を示すことです。このとき、屬性には値がないか、その値が名前と同じです (ここでは、自動再生は <video autoplay /> または <video autoplay です)。 =" autoplay" />); タグ內(nèi)でこの屬性を使用しない場合は false を意味します (ここで自動再生しないのは <video /> です)。
(4) ループ屬性
一見すると、loop 屬性はビデオをループで再生するかどうかを指定するために使用されます。これはブール型屬性でもあります。
(5) Controls 屬性
Controls 屬性は、ページ作成者が再生コントローラーを生成するためにスクリプトを使用していないこと、およびブラウザーが獨(dú)自の再生コントロール バーを有効にする必要があることをブラウザーに示すために使用されます。
コントロール バーには、再生と一時停止のコントロール、再生の進(jìn)行狀況のコントロール、音量コントロールなどを含める必要があります。
各ブラウザのデフォルトの再生コントロールバーはインターフェースが異なります。私のブラウザに奇妙な問題が発生したため、Firefox と Safari の Video タグが正しく機(jī)能していないため、オンラインでこれら 2 つのスクリーンショットしか見つけることができません。
(6) width屬性とheight屬性
は、これについては言うまでもありません。ビデオ形式とブラウザのサポート
現(xiàn)在、& lt; video & gt; Element は、MP4、Webm、OGG の 3 つのビデオ形式をサポートしています。
Internet Explorer はい はい いいえ
Chrome はい はいNO NO NO
Opera YES (Opera 25 より) YES YES
MP4 = H.264 ビデオ エンコードと AAC MPEGオーディオ エンコーディングを含む 4 ファイル
WebM = VP8 ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した WebM ファイル
Ogg = Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した Ogg ファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<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="mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=600;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
