[轉]響應式WEB設計學習(2)—視頻可以作成響應式嗎

原文地址:http://www.jb51.net/web/70361.html

上集回顧：

昨天講了頁面如何根據不一樣的設備尺寸作出響應。主要是利用了@media命令以及尺寸百分比化這兩招。

上集補充：

其中，利用如下CSS設置讓圖片或視頻大小不超過設備屏幕的寬度：

複製代碼

代碼以下:

img, object{
max-width:100%;
}

這一語句通常加在@media screen and (max-width:481)的判斷內，主要是讓手機用戶在查看網頁時圖片不至於比手機屏幕還大。

這一招在《Head First Moblie Web》中被稱爲「Fluid Image Technique」。 

視頻可以作成響應式嗎？

除了圖片之外，還有一種常見的多媒體形式是視頻。有時在web設計中，根據須要會在頁面中加入視頻，通常視頻都是上傳到youtube、土豆/優酷、新浪等網站上後，再用連接的形式加入到咱們的網頁中。

爲何在iphone上看不到youtube視頻？（在境外）

在IOS上查看網頁視頻時，在不越獄安裝插件的狀況下，是無法看flash格式的視頻的，由於iphone上的瀏覽器不支持Adobe Flash，這跟蘋果等公司的商業競爭政策有關，咱也沒辦法。對於這一問題，使用youtube視頻源的web設計有一個解決方案，就是將原來嵌套在網頁 中的object embed格式的代碼段替換成新的代碼段。

如，舊的頁面嵌套代碼段爲：

複製代碼

代碼以下:

<object width="230" height="179" type="application/x-shockwave-flash" data="http://www.youtube.com/v/O-jOEAufDQ4?fs=1&amp;h1=en_US&amp;rel=0"><embed src=... /></object>

將其替換爲：

複製代碼

代碼以下:

<iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe>

能夠看到，兩個視頻的出路實際上是不一樣的，youtube將用於移動設備顯示的嵌入型視頻放在embed目錄下，這樣大部分的移動設備就能夠正常觀看視頻了。

國內的視頻源能夠用<iframe>這一招嗎？

分別截取土豆和sina的各一段嵌入式視頻代碼能夠看到用的都是object embed方式：

土豆：

複製代碼

代碼以下:

<embed
src="....swf"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
wmode="opaque"
width="480" height="400"></embed>

sina：

複製代碼

代碼以下:

<div><object id='sinaplayer' width='480' height='370' >
<param name='allowScriptAccess' value='always' />
<embed pluginspage='http://www.macromedia.com/go/getflashplayer'
src='....swf'
type='application/x-shockwave-flash'
allowScriptAccess='always'
allowFullScreen='true'
name='sinaplayer'
width='480' height='370'></embed>
</object></div>

二者的參數設置也差很少，不過土豆的代碼要簡潔不少。

如今，用<iframe>代碼塊將土豆視頻地址包起來，放入測試頁面中，會發生一個問題：

（這是圖片哦……）

不能全屏了……這是由於單獨截取了播放地址，而與flash有關的例如allowFullScreen等設置都被拋棄了。那麼用iframe這個方法顯然就有兩個問題了：

一是片源格式沒有改變，仍是swf格式，仍然不能被不支持Adobe Flash的手機播放。

二是由於丟失了flash播放器的參數設置，而喪失了部分功能。

這樣顯然是不能接受的。

對於第一點，只能期待視頻網站使用更通用的視頻格式來規避各個硬件廠商之間商業競爭帶來的反作用；對於第二點，咱們將繼續使用object embed的方式，由於手機看不到flash格式的親們已經找到了各類破解、插件來彌補了，因此web設計者在沒有更通用片源格式的狀況下，仍是沿用以前 的方式好了。

可是，視頻格式的大小通常是固定的，只使用CSS而不使用javascript很難動態的根據設備的大小或者瀏覽器當前的尺寸來動態改變。就視頻的 寬度（width）而言，是能夠設置成百分比的形式，如設置成容器的80%，那麼該視頻就會一直佔其所在容器的80%的寬度，可是高度（height）就 沒法設定了，由於通常人都不會按比例去縮放瀏覽器窗口。要麼是拉窄點，要麼是縮短點。因此，靠百分比的方式來保證視頻尺寸的縮放不太現實。

在這樣的前提下，仍是但願視頻就保持必定的尺寸，而網頁的其餘部分根據瀏覽器的大小動態改變佈局。

如視頻所示：

 

 能夠看到，在拉動瀏覽器的整個過程當中，視頻的尺寸是不改變的，直到瀏覽器的寬度小於視頻的寬度時，視頻的寬度才變小（使用了上面提到的Fluid Image Technique）。

製做整個效果沒有什麼新的技巧，也就是將CSS的尺寸判斷又兩種變成了三種而已。具體的能夠看演示代碼。

【演示代碼在這裏下載】

總結：

視頻大小的自適應單靠CSS自己彷佛是作不到的。而但願移動設備能夠正常的觀看頁面視頻還期待於視頻網站使用更通用的視頻格式而不是flash……

最後拿一個書中的公式收尾吧RWD = Fluid-grid layouts + CSS media queries + Fluid Image/Media + a state of mind

大意是響應式設計 = 流式網格佈局 + @media語句 + 流式圖片/媒體 + 設計者的意識