HTML5ビデオ(ビデオ)
Video タグの紹介
ほとんどのユーザーはすでに Flash プラグインをインストールしています (実際、全インターネット ユーザーの約 95% が何らかのバージョンの Flash をインストールしています)。しかし、HTML 5 の支持者は、Flash プラグインをインストールしないオープンなプラグインを求めています。どのプラグインにもビデオ規格は必要ありません。これは、HTML 5 の新しい <video> タグによってもたらされたアイデアであり、Flash などの独自のプラグインを必要とせずにビデオを埋め込む (および操作する) 方法を提供します。
これまで、Web ページにビデオを表示するための標準はまだありませんでした。
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari は <video> 要素をサポートします。
注: Internet Explorer 8 以前の IE バージョンは <video> 要素をサポートしません。
Video タグの使用法
Video タグには、src、poster、preload、autoplay、loop、controls、width、height などのいくつかの属性と、内部で使用されるタグ <source> が含まれています。 <source> タグに加えて、指定されたビデオが再生できない場合に返されるコンテンツを Video タグに含めることもできます。
(1) src属性とposter属性
src属性が何に使われるかは想像できると思います。 <img> タグと同様に、この属性はビデオのアドレスを指定するために使用されます。 ｐｏｓｔｅｒ属性は、現在のビデオデータが無効な場合に表示する画像（プレビュー画像）を指定するために使用される。無効なビデオ データは、ビデオがロード中であること、ビデオ アドレスが正しくないことなどを意味する可能性があります。
(2) preload 属性
この属性は、ビデオがプリロードされるかどうかを定義するために使用されます。この属性には、none、metadata、auto の 3 つのオプションの値があります。この属性が使用されない場合、デフォルトは auto です。
なし: プリロードはありません。この属性値を使用すると、ユーザーがこのビデオを期待していないとページ作成者が判断したり、HTTP リクエストを削減したりすることができます。
メタデータ: 部分的にプリロードされています。この属性値を使用することは、ユーザーがこのビデオを期待していないとページ作成者が信じていることを意味しますが、ユーザーに何らかのメタデータ (サイズ、最初のフレーム、トラック リスト、再生時間など) を提供します。
自動: すべてプリロードされています。
(3) autoplay 属性
も名前を見れば用途が分かる属性です。 Autoplay 属性は、ビデオを自動的に再生するかどうかを設定するために使用されます。これはブール型の属性です。表示されている場合は、自動再生されていないことを意味します。
HTMLのブール属性の値はtrueとfalseではないことに注意してください。正しい使用方法は、この属性をタグ内で使用して true を示すことです。このとき、属性には値がないか、その値が名前と同じです (ここでは、自動再生は <video autoplay /> または <video autoplay です)。 =" autoplay" />); タグ内でこの属性を使用しない場合は false を意味します (ここで自動再生しないのは <video /> です)。
(4) ループ属性
一見すると、loop 属性はビデオをループで再生するかどうかを指定するために使用されます。これはブール型属性でもあります。
(5) Controls 属性
Controls 属性は、ページ作成者が再生コントローラーを生成するためにスクリプトを使用していないこと、およびブラウザーが独自の再生コントロール バーを有効にする必要があることをブラウザーに示すために使用されます。
コントロール バーには、再生と一時停止のコントロール、再生の進行状況のコントロール、音量コントロールなどを含める必要があります。
各ブラウザのデフォルトの再生コントロールバーはインターフェースが異なります。私のブラウザに奇妙な問題が発生したため、Firefox と Safari の Video タグが正しく機能していないため、オンラインでこれら 2 つのスクリーンショットしか見つけることができません。
(6) width属性とheight属性
は、これについては言うまでもありません。ビデオ形式とブラウザのサポート
現在、& 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中文网(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 标签。
</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>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
