Apple教你玩HTML5，抱歉！Safari限定

自從iPad推出之後，Apple一整個打槍Flash，並說HTML5有多好用，現在Apple官網還推出了HTML5的demo網頁，想要告訴開發者們HTML5有多讚，但很幽默的是，Apple官網上的HTML5 demo只給Safari使用，這好像沒什麼說服力阿！不過我們還是來玩一玩吧！

HTML5的demo總共有7個，分別是影片播放、字體控制、相本、翻頁特效、音樂播放、360度產品展示、虛擬實境，既然是HTML5，那我們就直接用iPad來玩一玩這些demo吧！

影片播放也能玩特效

當HTML5一開始引起大量注意，就是YouTube等影音網站都開始提供HTML5的播放頁面，播放影片的功能也當然被Apple放到了第一位，除了播放之外，還能在影片上做出傾斜、加濾鏡的效果，影片也能在背景中播放。

▲已經有不少影音網站都支援使用HTML5來播放影片。

▲在影片上加上濾鏡並做傾斜的效果，影片還是一樣正常的播放。

文字特效樣樣來

字型效果在CSS中，一向不是什麼問題，CSS3下有許多字體的特效都能做得出來，像是加個字體陰影、旋轉、變顏色、字距加寬等等，輸入中文也沒有問題，不過筆者在iPad輸入中文的時候就會變亂碼，算是一點小bug。

▲輸入字體後可以任意的旋轉和改變顏色。

▲Mac OS下的Safari可以輸入中文，也能把字體加上陰影。

▲另外也還能在字體內加上圖片，不過這部分只能看不能玩。

讓照片更有立體感

這部分是展示相片的功能，能把照片拉出來，並把背景模糊化，做出有3D景深的感覺，不過這種特效在AJAX剛熱的時後就有不少套件做得到，所以也比較不新鮮。

▲HTML5能讓照片展示更炫麗，不再是單調的排排站。

華麗的翻頁效果

這些特效就像是簡報檔中的過片效果一樣，可以很簡單的利用翻轉、移動、飛入的方式來切換照片，和上面的demo有互相對應的感覺。

▲照片在切換的時候可以套用不同的特效，看起來十分酷炫。

播放音樂好簡單

有了HTML5之後，想要播放音樂，只要運用<audio>標籤就能簡單的插入網頁串流，用起來就好像是在播iTunes一樣。

▲按下Play就能播放，不需要安裝任何外掛。

360度就像看見真的產品

常上Apple網站都知道Apple很早就使用360度展示產品，這個功能其實就是把很多張照片串在一起，利用拖拉的方式讓物體旋轉時不停的切換照片，產生立體旋轉的感覺，對於網路上常常看不到實體的商品來說，這個功能十分的好用。

▲看起來好像只有一張圖片，但滑鼠托拉的時候物品會跟著旋轉。

虛擬實境讓你身在現場

有了360度產品展示還不夠，實體的照片也能做成360度的視角，讓你轉來轉去直接看到周圍的景像，這樣的效果相信各位在Google Maps街景都玩過了。

▲上下左右拖拉即可轉換影像，不只是看到一張照片，而是全景。

很多人支援，但尚未普及

儘管很多人倡導HTML5，但也不是每個瀏覽器都支援，像是IE要到第9版才會支援HTML5，有寫過JavaScript和CSS的人都知道不同的瀏覽器常常會搞死人，所以就算是HTML5也不能保證什麼瀏覽器都能用。

Apple也十分機車的直接告訴你要玩這些demo就要先裝Safari才行，所以看得到HTML5雖然可以做到不少事，但最後還是要等瀏覽器和開發工具跟上來才能好好的發光發熱，不然光是各瀏覽器的相容性就會搞死開發者了吧！

另外，開放者網站還有更多的demo，有興趣可以自己玩看看。

▲如果不是使用Safari的話就會出現要你下載Safari的視窗，這一定是Apple的陰謀。

▲最後附上使用iPad來看用Flash做成的網頁，如果不裝外掛的話，HTML5看起來似乎是比較有搞頭一點？