網(wǎng)站建設(shè)定制遠程視頻自適應(yīng)網(wǎng)頁設(shè)計方法
- 編輯：admin -具體代碼有CSS3代碼和HTML5代碼兩部分;其中CSS3代碼部分主要用來控制遠程視頻的載入及寬高比等, 而HTML5代碼部分主要控制視頻顯示分辨率及負責視頻地址的連接。
遠程視頻自適應(yīng)網(wǎng)頁設(shè)計方法。(1) 、用Fit Vids插件實現(xiàn)遠程視頻自適應(yīng):網(wǎng)頁中的遠程視頻自適應(yīng)可以借助于一個名為Fit Vids插件實現(xiàn)。(2) 、用流動布局技術(shù)實現(xiàn)遠程視頻自適應(yīng):為保證遠程視頻能夠自適應(yīng)移動終端等屏幕的寬度, 可以先用<div>標簽將<iframe>包裝起來, 并定義合適的樣式;同時指定60%填充底部;然后用100%寬度、100%高度、絕對位置指定子元素的尺寸, 以使被嵌入的元素可以自動擴展到最大寬度。
具體代碼有CSS3代碼和HTML5代碼兩部分;其中CSS3代碼部分主要用來控制遠程視頻的載入及寬高比等, 而HTML5代碼部分主要控制視頻顯示分辨率及負責視頻地址的連接。
CSS3主要基于不同視頻文件的寬高比例有所不同而設(shè)計使用, 對于標準視頻文件, 其寬高比4∶3, 而對于寬屏模式, 其寬高比為16∶9。而對于上述HTML5代碼中, 寬高像素比是640∶480, 即是我們所說的寬高比4∶3, 那么相應(yīng)CSS3中padding-bottom的值應(yīng)為75%;如果當視頻寬高比是16∶9時, 相應(yīng)CSS3中padding-bottom的值則需要修改為56.25%;再就是需要根據(jù)所要顯示視頻文件像素大小來修改HTML5代碼中<iframe>內(nèi)視頻文件的寬度、高度等屬性。