瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.
不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/
這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!
由於要播放 WMV 或是 Windows Media Service 的影音串流, 使用原來的 embedded windows media player 的方式, 比較難跨不同瀏覽器及作業系統, 自從 silverlight 出來之後, 方便的跨瀏覽器和作業系統的特性, 方便讓原來使用Windows Media 格式的影音及串流在不同瀏覽器及作業系統間可以播放.
接下來看看這個很方便的影音播放器, JW Player, http://www.longtailvideo.com/players/, 最早期他是提供了 Flash Player 供應用, 後來有了 Silverlight 及 HTML5 支援影音後, 也陸續推出了 Silverlight 及 HTML5 的播放器.
我們今天要看的是 JW Player for Silverlight 的這個播放器, 其實使用上非常簡單, 可以到這裡下載: http://www.longtailvideo.com/players/jw-wmv-player/ 下載的程式碼內容就有簡單的範例可供應用, 例如要生成一個播放器可以在網頁上播放, 只需要以下的程式碼:
<div name="mediaspace" id="mediaspace"></div>
<script type='text/javascript' src="silverlight.js"></script>
<script type='text/javascript' src="wmvplayer.js"></script>
<script type="text/javascript">
var cnt = document.getElementById("mediaspace");
var src = 'wmvplayer.xaml';
var cfg = {
file:'video.wmv',
image:'preview.jpg',
height:'240',
width:'440'
};
var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>
MySQL 中, text 屬性的欄位, 用來存放文字的資料格式, 共區分為以下 4種, tinytext, text, mediumtext, longtext, 分別的長度大小為 2^8, 2^16, 2^24, 2^32 bytes 這麼大.
簡單地說, 分別就是 256bytes, 64kbytes, 16Mbytes, 4Gbytes, 在 MySQL 中的 text 有大小不同的限制呢, 所以一般若是只開 text 的話, 最大也只能存到 64kbytes 而已.
參考資料:
http://dev.mysql.com/doc/refman/5.5/en/storage-requirements.html
http://plog.longwin.com.tw/programming/2009/10/20/mysql-text-field-type-length-limit-2009
由於 html5 起可以將 video, audio 等 tag, 將更方便把資料直接寫在 html code 中. 從這篇文章 “利用HTML5对文件进行base64转换” – http://www.pjhome.net/article/Javascript/file_to_base64_url.htm 的頁面工具上, 有個有趣的應用, 線上直接把檔案轉成 base64 的編碼, 方便寫入 html code 之中, 工具連結為: http://www.pjhome.net/web/html5/encodeDataUrl.htm
例如這張圖片:
利用該網頁產生的結果為:
data:image/gif;base64,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
改為 html 寫入則為:
<img src="data:image/gif;base64,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">
一樣可以輸出結果, 但是是利用 <img src=”….”> (…為上面的 base64 內容), 這樣一來就能將小型圖檔及小型媒體檔案一併寫入 html code 中, 效果其實有好有壞, 含入 html code 中, 可以減少 client 到 server 的多次 request, 但傳輸量相對比較大, 應用上要多評估, 不過上面文章應用的 html5 技術來做線上轉換, 是很有意思的一種應用!
繼續閱讀:
http://blog.donews.com/crackme/archive/2009/11/23/1573849.aspx
http://zetajames.wordpress.com/2010/01/08/lower-http-requests/
http://blog.darkthread.net/blogs/darkthreadtw/archive/2010/11/05/data-uri.aspx
[2010/12/30 10:37]
其實 Google 的圖片搜尋結果中的預覽圖, 若使用有支援 Data URI 的瀏覽器時, 就會使用這種方式來輸出預覽圖, 例如 IE8:
google chart api 是很方便的圖表工具, 在餵給對應的資料時使用, 可以直接產生圖表.
現在有新的工具, ChartTool, 也就是在線上直接以互動的方式進行圖表的產生, 一邊輸入, 一邊看著 chart api 中的參數變化, 方便進行應用.
網址在這裡: http://imagecharteditor.appspot.com/ 看起來不像是 google 的 url 吧, 其實是從這裡來的: http://code.google.com/intl/zh-TW/apis/chart/docs/chart_wizard.html (圖表精靈產生工具)
一步一步選擇自己要的圖表類型, 接著輸入資料, 就可以很方便產生出對應數據資料的圖表, 除了方便非開發者使用這個線上圖表工具外, 也方便開發者在不需要仔細閱讀文件, 就能快速地了解產生圖表所需要的參數應用, 以快速達成圖表結合程式的產生方式.
如下圖, 把資料輸入好, 就能產生出對應的圖表:
範例是本站2010/11的來訪者瀏覽器佔比:
看起來還是 IE8, IE7, IE6 佔多數, 可以參考去年8月的數字:
[2021/9/20 12:09]
之前的 Google Chart Editor 網址皆已失效了, 若在找相關資料的朋友們, 可以參考這裡: https://developers.google.com/chart, 另外看起來原來的 Google Charts Infographics 也即將要淘汰了: https://developers.google.com/chart/infographics
這個 JSFIDDLE: http://jsfiddle.net/ 是一個線上版本, 進行 javascript 測試及除錯使用的方便工具, 包含了大量的 javascript frame, 有 MooTools, jQuery, Prototype, YUI, Glow, Dojo, Processing, ExtJS, Raphael, RightJS 及不使用 framework 多種選擇.
不僅如此, html, css 更是能分區編輯, 方便測試, 而且實作的程式結果也可以存下來, 方便日後再拿出來看, 或是進行 share 討論, 還能分支開發 (fork) 下去, 真的是十分方便實用的 javascript 工具.
例如這個測試的程式, 功能就是一直累加而已, 可以玩看看: http://jsfiddle.net/Ej4rC/
還可以直接 embed (透過 iframe ) 放到外站, 如下:
(iframe http://jsfiddle.net/Ej4rC/)
可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!
從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/
隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.
這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/
看起來相容性最好的是 android 方面的瀏覽器.
有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/
相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!
在 .net 中的 Regular Expression, 是使用這個 namespace: System.Text.RegularExpressions
其中若是要做比對樣式的內容取代, 可以使用 MatchEvaluator, 來進行將比對的內容進行處理再替代回去. 例如將 Server.UrlEncode 後的 %2f 改為 %2F, 而其他部分不要異動大小寫時, 就很實用.
程式碼如下:
using System.Text.RegularExpressions;
string value = "http://www.google.com";
value = Server.UrlEncode(value);
value = Regex.Replace(value, "(%[0-9a-f][0-9a-f])", delegate(Match match) { return match.ToString().ToUpper();});
Response.Write(value);
其中 Server.UrlEncode 出來的結果為: http%3a%2f%2fwww.google.com , 而利用了 Regex.Replace 配合 MatchEvaluator 後, 就改為 http%3A%2F%2Fwww.google.com , 這樣只有改到 %xx 這種的大小寫, 而不會影響原來的大小寫.
其中的 MatchEvaluator 是一個 delegate 就是用來做每個比對到的內容再做加工的處理, 這裡用了類似 javascript 中的暱名函數處理, 把 MatchEvaluator 直接 inline 寫在裡面. 其中的 System.Text.RegularExpressions.Match 還有許多屬性可以, 例如 Index 可以取出是第幾個比對到的, 可以參考: http://msdn.microsoft.com/en-us/library/system.text.regularexpressions.match_members.aspx
這樣一來是不是變得很容易處理字串, 另外也要注意有關的效率問題, 一定要顧及, 否則在大量文字比對後, 又利用了 MatchEvaluator 來進行處理, 若該函數效率不好, 會大打折扣的.
在 Flickr 中, 有許多照片(廢話), 而這些照片, 也有放在相簿集(set)裡, 如何把相簿集裡的相片的 url 取出來呢?
首先我們先來看一個工具, 叫做 YQL (Yahoo! Query Language): http://en.wikipedia.org/wiki/Yahoo!_query_language , 這個語言是望文生義, 就是用來進行查詢 Yahoo! 服務的語言, 而我們需要的功能, 剛好裡面有提供, 所以我們就利用這個查詢語言來進行查詢, 先來看看語法, 到這個 YQL Console 來看: http://developer.yahoo.com/yql/console/
來到這裡, 真是開發者的天堂, Yahoo! 的服務查詢, 這裡幾乎都有提供, 而今天我們要查找的正是這個 table: flickr.photosets.photos, 假設今天要查的 photo set 是這個 url: http://www.flickr.com/photos/okilyt/sets/72157600079438372/, 則 set_id 就是 72157600079438372, 於是輸入如下的語法:
select * from flickr.photosets.photos where photoset_id = 72157600079438372
就會生出如下的 xml:
<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
yahoo:count="10" yahoo:created="2010-08-06T11:19:06Z" yahoo:lang="en-US">
<diagnostics>
<publiclyCallable>true</publiclyCallable>
<url execution-time="141"><![CDATA[http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&photoset_id=72157600079438372&page=1&per_page=10]]></url>
<user-time>142</user-time>
<service-time>141</service-time>
<build-version>8771</build-version>
</diagnostics>
<results>
<photo farm="1" id="460118008" isprimary="1" secret="4d856aaa72"
server="239" title="DSC_3989"/>
<photo farm="1" id="460125135" isprimary="0" secret="15a3d24484"
server="208" title="DSC_3987"/>
<photo farm="1" id="460117456" isprimary="0" secret="76bdfd928c"
server="191" title="DSC_3986"/>
<photo farm="1" id="460117112" isprimary="0" secret="515535f02e"
server="253" title="DSC_3983"/>
<photo farm="1" id="460116928" isprimary="0" secret="68286fc46a"
server="200" title="DSC_3981"/>
<photo farm="1" id="460116620" isprimary="0" secret="4245ef4c5a"
server="183" title="DSC_3980"/>
<photo farm="1" id="460123637" isprimary="0" secret="68351dfe14"
server="236" title="DSC_3963"/>
<photo farm="1" id="460123365" isprimary="0" secret="80edceee74"
server="243" title="DSC_3961"/>
<photo farm="1" id="460115832" isprimary="0" secret="80b8d482bf"
server="246" title="DSC_3958"/>
<photo farm="1" id="460122569" isprimary="0" secret="2ee7c9e00e"
server="242" title="DSC_3954"/>
</results>
</query>
真是方便耶, 不過筆數好像只有十筆, 全部應該要有 18筆才對, 所以查了一下資料, http://developer.yahoo.com/yql/guide/paging.html , 發現可以在 table 後方加上 (0) 來進行全部查出, 於是調整一下語法如下:
select * from flickr.photosets.photos(0) where photoset_id = 72157600079438372
就可以方便地把整個 photo set 中的相片查找出來了, 而相片的 url 就可以利用這些 xml 來組合出來, 語法如下:
http://farm[farm].flickr.com/[server]/[id]_[secret].jpg
很容易吧! 這樣一來, 要取出某相簿的照片 url 就方便多了, 寫成小工具, 放在這裡: http://sample.diary.tw/flickrset/
在 .net 中有個 System.Globalization 裡, 有許多國家的日曆可用, 像是民國年的轉換, 或是農曆年的轉換, 這個真的很有意思. 也免除了在程式中, 程式設計人員的轉換麻煩.
先來看看民國年的部分, 程式如下:
TaiwanCalendar tc = new TaiwanCalendar(); int year = tc.GetYear(DateTime.Now); //現在是西元2010年 MessageBox.Show(year.ToString()); // 會秀出 99
有趣的, 我想試看看早於 1911 年(也就是民國還未成立時, 會發生什麼事), 結果如下, 會發生一個 OutOfRangeException 如下圖:
也就是必須是西元陽曆1912/1/1 00:00:00 ~ 9999/12/31 23:59:59 才行, 否則會有 Exception.
這樣當然很合理啦. 也避免一些錯誤輸入的狀況.
另外來看看農曆, (或稱陰曆, 月亮曆), 來試看看今天是農曆的日期:
TaiwanLunisolarCalendar tlc = new TaiwanLunisolarCalendar(); int month = tlc.GetMonth(DateTime.Now); int day = tlc.GetDayOfMonth(DateTime.Now); MessageBox.Show(month.ToString() + "/" + day.ToString());
今天是 2010/6/29, 秀出的結果是 5/18 相當正確, 十分方便. 不過似乎沒有反過來的查法, 但有正向查詢應該就很夠用了, 反向查再稍加手腳即可.
另外也可以取出天干(GetCelestialStem()), 地支(GetTerrestrialBranch())的功能. 還有日本曆(JapaneseCalendar), 很有意思.
參考資料:
http://dotnetmis91.blogspot.com/2010/06/dotnet-systemglobalization.html
http://anita-lo.blogspot.com/2008/03/net_20.html
這篇是日本曆的年號: http://blog.csdn.net/xue1234567890/archive/2009/10/24/4723056.aspx