HTML5 Video(影片)
Video標(biāo)籤介紹
大多數(shù)用戶已經(jīng)安裝了Flash外掛（事實(shí)上，大概有95%的上網(wǎng)用戶都裝有Flash的某個(gè)版本），但HTML 5的支持者正在推動(dòng)一個(gè)開(kāi)放的，不需要任何插件的視訊標(biāo)準(zhǔn)。這就是HTML 5的新標(biāo)籤<video>帶來(lái)的構(gòu)想，他提供了一個(gè)嵌入視訊（以及與其互動(dòng)）而不需要類似Flash的私有插件的方法。
直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示影片的標(biāo)準(zhǔn)。
瀏覽器支援情況
Internet Explorer 9+, Firefox, Opera, Chrome, 和Safari 支援<video> 元素.
注意: Internet Explorer 8 或更早的IE版本不支援<video> 元素。
Video標(biāo)籤的使用
Video標(biāo)籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個(gè)屬性，以及一個(gè)內(nèi)部使用的標(biāo)籤<source>。 Video標(biāo)籤內(nèi)除了可以包含<source>標(biāo)籤外，還可以包含當(dāng)指定的影片都不能播放時(shí)，傳回的內(nèi)容。
(1) src屬性和poster屬性
你能想像src屬性是用來(lái)幹啥的。跟<img>標(biāo)籤的一樣，這個(gè)屬性用來(lái)指定影片的位址。而poster屬性用於指定一張圖片，在目前影片資料無(wú)效時(shí)顯示（預(yù)覽圖）。視訊資料無(wú)效可能是視訊正在加載，可能是視訊地址錯(cuò)誤等等。
(2) preload屬性
這個(gè)屬性也能透過(guò)名字了解用處，此屬性用於定義影片是否預(yù)先載入。屬性有三個(gè)可選擇的值：none、metadata、auto。如果不使用此屬性，預(yù)設(shè)為auto。
None：不進(jìn)行預(yù)先載入。使用此屬性值，可能是頁(yè)面製作者認(rèn)為用戶不期望此視頻，或減少HTTP請(qǐng)求。
Metadata：部分預(yù)先載入。使用此屬性值，代表頁(yè)面製作者認(rèn)為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時(shí)間等等）。
Auto：全部預(yù)先載入。
(3) autoplay屬性
又是一個(gè)看名字知道用處的屬性。 Autoplay屬性用於設(shè)定影片是否自動(dòng)播放，是一個(gè)布林屬性。當(dāng)出現(xiàn)時(shí)，表示自動(dòng)播放，去掉是表示不自動(dòng)播放。
注意，HTML中布林屬性的值不是true和false。正確的用法是，在標(biāo)籤中使用此屬性表示true，此時(shí)屬性要么沒(méi)有值，要么其值恆等於他的名字（此處，自動(dòng)播放為<video autoplay />或者<video autoplay=” autoplay” />）；而在標(biāo)籤中不使用此屬性表示false（此處不進(jìn)行自動(dòng)播放為<video />）。
?(4) loop屬性
一目了然，loop屬性用來(lái)指定影片是否循環(huán)播放，同樣是一個(gè)布林屬性。
(5) controls屬性
Controls屬性用於向?yàn)g覽器指明頁(yè)面製作者沒(méi)有使用腳本產(chǎn)生播放控制器，需要瀏覽器啟用本身的播放控制欄。
控制列須包含播放暫?？刂?，播放進(jìn)度控制，音量控制等等。
每個(gè)瀏覽器預(yù)設(shè)的播放控制列在介面上不一樣。由於我瀏覽器的詭異問(wèn)題，F(xiàn)irefox和Safari的Video標(biāo)籤不正常，所以這兩個(gè)只能在網(wǎng)路上找截圖了。
(6) width屬性和height屬性
屬於標(biāo)籤的通用屬性了，這個(gè)不用多說(shuō)。
影片格式與瀏覽器的支援
目前， <video> 元素支援三種影片格式： MP4, WebM, 和Ogg:
瀏覽器? ? ? ? ? ? ? ? ? ??MP4 ? ? ? ? ? ? ? #??YES ? ? ? ? ? ? ? ? ?NO ? ? ? ? ? ? ? ? NO ? ?#Chrome ? ? ? ? ? ? ? ? ? YES ? ? ? ? ? ? ? ? YES ? ? ? ? ? ? ? ? YES ? ?
Firefox ? ? ? ? ? ? ? ? ? ? YES ? ? ? ? ? ? ? ? YES ? ? ? ? ? ? ? ?YES ? ?
Safari ? ? ? ? ? ? ? ? ? ? ?YES ? ? ? ? ? ? ? ? ?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>#
