網頁制作視頻代碼

網頁制作視頻代碼Video標簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內部使用的標簽。Video標簽內除了可以包含標簽外，還可以包含當指定的視頻都不能 播放時，返回的內容。

(1) src屬性和poster屬性

你能想象src屬性是用來干啥的。跟標簽的一樣，這個屬性用于指定視頻的地址。而poster屬性用于指定一張圖片，在當前視頻數(shù)據(jù)無效時顯示（預覽圖）。視頻數(shù)據(jù)無效可能是視頻正在加載，可能是視頻地址錯誤等等。

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”????></????video????>??

(2) preload屬性

這個屬性也能通過名字了解用處，此屬性用于定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為auto。

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”????></????video????>??

None：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。

Metadata：部分預加載。使用此屬性值，代表頁面制作者認為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時間等等）。

Auto：全部預加載。

(3) autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用于設置視頻是否自動播放，是一個布爾屬性。當出現(xiàn)時，表示自動播放，去掉是表示不自動播放。

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=??http://www.qlyl1688.com/??????”none”????></????video????>??

注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標簽中使用此屬性表示true，此時屬性要么沒有值，要么其值恒等于他的名字 （此處，自動播放為或者）；而在標簽中不使用此屬性表示false（此處不進行自動播放為）。

(4) loop屬性

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??loop????=????”loop”????></????video????>??

一目了然，loop屬性用于指定視頻是否循環(huán)播放，同樣是一個布爾屬性。

(5) controls屬性

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”?? ??controls????=????”controls”????></????video????>??

Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。

控制欄須包括播放暫?？刂?，播放進度控制，音量控制等等。

每個瀏覽器默認的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，F(xiàn)irefox和Safari的Video標簽不正常，所以這兩個只能在網上找截圖了。

(6) width屬性和height屬性

屬于標簽的通用屬性了，這個不用多說。

(7) source標簽

??<????video?? ??width????=????”658″?????height????=????”444″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”?? ??controls????=????”controls”????><????source?? ??src????=????”http://www.youname.com/images/first.ogv”????/><????source?? ??src????=????”http://www.youname.com/images/first.ogg”????/></????video????>??

Source標簽用于給媒體（因為audio標簽同樣可以包含此標簽，所以這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標簽沒有使用src屬性時使用。

瀏覽器按source標簽的順序檢測標簽指定的視頻是否能夠播放（可能是視頻格式不支持，視頻不存在等等），如果不能播放，換下一個。此方法多用于兼容不同的瀏覽器。Source標簽本身不代表任何含義，不能單獨出現(xiàn)。

此標簽包含src、type、media三個屬性。

src屬性：用于指定媒體的地址，和video標簽的一樣。

Type屬性：用于說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

Media屬性：用于說明媒體在何種媒介中使用，不設置時默認值為all，表示支持所有媒介。你想到

(8) 一個完整的例子

??<????video?? ??width????=????”658″?????height????=????”444″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”?? ??controls????=????”controls”????><????source?? ??src????=????”http://www.youname.com/images/first.ogv”????/> <????source?? ??src????=????”http://www.youname.com/images/first.ogg”????/></????video????>??

這一段編碼在網頁中界定了一個視頻，此視頻的瀏覽圖為poster的屬性值，表明電腦瀏覽器的默認設置新聞媒體操縱欄，預加載視頻的數(shù)據(jù)庫，循環(huán)播放，總寬為900清晰度，高度為240清晰度。 第一挑選視頻詳細地址為第一個source標識的src屬性值，視頻類型為Ogg視頻，視頻編號譯碼器為Theora，音頻編碼譯碼器為Vorbis，播放視頻媒 介為顯示屏；第二挑選視頻詳細地址不會再累述。假如你還需要兼容IE得話，能夠在最后一個source標識后再再加上Flash播放器的標簽集，或是應用一點 JavaScript編碼。

域名頻道一家知名的網站制作、網站優(yōu)化、網站推廣提供商，虛擬主機的大賣場。
虛擬主機95%均有贈送數(shù)據(jù)庫，一般不需要單獨購買。支持子站的主機，若要開設多個網站時，默認只贈送一個數(shù)據(jù)庫。
Windows虛擬主機支持html、ASP、.Net 2.0/3.0/3.5/4.0、Perl 5、WAP 、PHP 5.2/5.3/5.4/5.5，Linux虛擬主機支持html、PHP 5.2/5.3/5.4/5.5、Perl 5、WAP。
基于微信的外賣-訂座-電子菜單平臺：微餐飲http://http://forest-oxygen.cn/web/weicanyin.asp