Eddy@Joomla!

HTML&CSS

02Dec

HTML5: Video

CSS / Eddy Chang / 週五, 02 十二月 2011 05:14

HTML5中的Video依然是各大廠競爭激烈的地方，和Audio類似，在相容和影片格式依然會依不同的瀏覽器有不同的支援。Video也涉及了相關的控制API，並不是每個瀏覽器都支援得完整。

網路上有很多可以參考的文件，說明桌上型及手機設備中瀏覽器對HTML5的Video支援性的內容。我找到比較完整的是下面這個投影片：

HTML5 Video Explained

View more presentations from Mike Wilcox

在第81頁有說明手機設備的支援內容，當然如果你的目的是像我一樣要開發手機瀏覽器的應用，除了這些參考文件外，最應該了解的就是官方的開發文件：

iOS的影片格式支援（還有其他）

Android多媒體格式支援的文件

Video的用法除了<video>標籤外，還需要靠Javscript來控制其行為（當然每個瀏覽器有預設的控制列），下面這個是比較簡單的入門教學：

http://www.w3schools.com/html5/html5_video.asp

Tags: android | html5 | iphone | video

30Nov

HTML5：Audio

HTML5 / Eddy Chang / 週三, 30 十一月 2011 22:51

HTML5的Audio和Video都有類似的情況：①檔案格式與②瀏覽器版本相容的問題。雖然最終還是會用Javascript函式庫來協助加這些標籤或進行控制，不過還是得先了解一下基本的格式：

<audio controls="controls" autoplay loop>
 <source src="/sound/cartoonimpact.mp3" type="audio/mp3" />
 <source src="/sound/cartoonOGG.ogg" type="audio/ogg" />
 <source src="/sound/cartoonimpact.aac" type="audio/aac" />
 <source src="/sound/cartoonimpact.wma" type="audio/wma" />
 <source src="/sound/cartoonimpactwav.wav" type="audio/x-wav" />
 </audio>

看到了嗎，這些格式的轉換就會搞死人了，為什麼需要這麼多不同的格式，原因是有些格式在某些瀏覽器中不支援，有些格式在特定的瀏覽器才能支援，至於要能用audio這個HTML5的瀏覽器，在手機上目前iOS 4+、Android 2.3+和Opera Mobile 11+有支援，而一般的電腦的瀏覽器要下面這個版本才有支援：

閱讀全文...

29Nov

CSS layout-background repeat-y on IE7

CSS / Eddy Chang / 週二, 29 十一月 2011 01:50

製作向上下延申背景圖的div時，發現了IE7觀看會有空白一片的問題，例如：

<div>
 <div><img src="/images/menu_01.jpg" width="163" height="8" alt=""></div>
 <div style="background: url('/images/menu_02.jpg') repeat-y top left;"><jdoc:include type="modules" name="left" /></div>
 <div><img src="/images/menu_04.jpg" width="163" height="8" alt=""></div>
</div>

目前解決有找到兩個：

1.加入z-index:1，在用背景圖的那個div裡

2.加入overflow:auto，在用背景圖的那個div

測試過IE7（IE8模擬）兩種都可以正常顯示。

28Nov

CSS Layout - Dynamic width DIV

CSS / Eddy Chang / 週一, 28 十一月 2011 18:18

<div style="height:42px; width:100%; margin:0; padding:0">
 <div style="float:left;margin:0; padding:0;"><img src="/images/content_title_01.jpg" width="23" height="42" alt=""></div>
<div style="float:left;margin:0 ; padding:7px 0 0 0;height:42px; width:765px; background: url('/images/content_title_02.jpg') repeat-x; "><?php echo $this->escape($this->item->title); ?>
</div>
 <div style="float:left;margin:0; padding:0;"><img src="/images/content_title_04.jpg" width="22" height="42" alt=""></div>
</div>

需改為以下，注意float變成一左一右，然後主內容在中間：

<div style="height:42px; width:100%;">
 <div style="float:left;width:23px"><img src="/images/content_title_01.jpg" width="23" height="42" alt=""></div>
 <div style="float:right;width:22px"><img src="/images/content_title_04.jpg" width="22" height="42" alt=""></div>
 <div style="display:block; margin-left:auto; margin-right: auto;padding:7px 0 0 0;height:42px; background: url('/images/content_title_02.jpg') repeat-x; "><?php echo $this->escape($this->item->title); ?></div>
 
</div>

中間的文字區域就可以動態延長寬度。用於中間文字區域的要有背景時。

測試過IE 7/8/9, Firefox, Chrome都ok。這個解法的來源是：

http://stackoverflow.com/questions/1359025/css-layout-dynamic-width-div