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