分類
程式技術

使用Clappr Video Player時滿版需求(CSS)

之前 Flash Player 因為已經 EOL 下架了. 參考: https://diary.tw/archives/11 (相信很多人也已經改了 html5 的解決方案了).

不過若是以純 video player, 個人建議使用這個 clappr player 是適合的替代品( https://github.com/clappr/clappr) , 用純 html5 的 media element 解決方案來達成 media player 功能, 無論是 mp4 或是 hls 的 live streaming.

目前有個使用上的需求, 就是要能滿版 player , 也就是不要出現比例上不正確時的上下出黑(letterbox)或左右出黑(pillarbox)的狀況.

上下出黑的 letterbox 示意圖:

左右出黑的 pillarbox 示意圖:

而要拉伸視訊至滿版播放器要如何進行設定呢? 原本在查找 clappr doc (http://clappr.github.io/)時, 一直沒有找到對應的設定, 後來發現其實在原本的 css 就有個設定可以達成, object-fit 這個屬性: https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit

當這個屬性設定為 object-fit: fill; 時, 就可以達成 stretch to fit 的功能, 也就是不成比例的拉伸(或壓縮)為對應的尺寸, 而不會出現為了維持比例而出現的 letterbox 或 pillarbox.

可以參考這個範例:

https://codepen.io/timhuang/pen/vYGvpqo

繼續閱讀:

https://www.jacksonlin.net/20181218-letterbox-on-youtube/

 

分類
WebTrend

Adobe Flash Player日落作業

今天桌機跳出了熟悉的畫面:

等等… 是解除安裝通知. 不是更新耶. 總算到最後了, Flash 歷經了十多年的年齡, 也即將於 2020/12/31 退役了. 雖然很多人很早就不再使用, 不過看起來這個官方的退役宣告, 也就是個終點了…

PS: 畫面上的 EOL連結: https://www.adobe.com/products/flashplayer/end-of-life.html

分類
程式技術

找不到的FlashMediaPlayback.swf

今天在查一個小問題, 就是使用 flash player 播放 video 的一個網頁, 發現完全沒有畫面, 結果是因為這個連結沒有檔案 (status=404) http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf

雖然是現在盡量不要使用 flash player 來播放 video, 不過這是因為一個 live streaming 的應用, 所以會播放一個 rtmp 的 video streaming, 也就使用了前面的官方 Flash Media Playback 播放器.

查了一會, 有篇官方的回覆在這裡: https://forums.adobe.com/thread/2013396, 說是已經停止下載了, 需要用戶自行 hosting 這個檔案, source 在這裡: http://sourceforge.net/projects/smp.adobe/files/ strobe media playback.

大家可以自行下載, 並 hosting 在自家網站上, 不要再連結到 adobe 了, 不然沒辦法使用了.

話說回來, 應該是要趕快改 html5 才對, 解決這個還在使用 flash player playback 的問題.

分類
好用軟體

線上學習科學的互動活網站PhET

這篇文章要介紹的是一個 PhET 線上教學網站.
以往我們在學習物理, 化學, 地球科學等科學時, 看文字教材遠不如看影片或是互動活教材, 這個網站提供了線上(也有離線版本), 分門別類整理好的互動式活教材, 而且還有繁體中文. 先來看看首頁:

http://phet.colorado.edu/zh_TW/

開始用就直接按下”開始玩教學”, 若是要下載離線版本可以點右下方的”完整執行”後, 即可下載教學離線版本. 由於所有的教材都是使用 flash 及 java 在瀏覽器環境下使用, 所以可以很方便地在各種作業系統及瀏覽器上使用, 方便又好用.

點入開始玩教學後, 左邊看到的是完整的分類, 右邊則是目前分類項目的內容(預設在最新):
而且還有區分年級的方式整理, 讓小朋友也能找到適合的教材, 點下”依年級區分教學主題:
有區分為國小, 國中, 高中, 大學幾個分類, 來點個國小的看看吧, 選了裡面的”繩波”:

繩波的連結: http://phet.colorado.edu/sims/wave-on-a-string/wave-on-a-string_zh_TW.html

用互動的方式來呈現的教學, 相信最容易也記憶最深, 大家可以好好利用, 趁暑假, 可以讓自己或小朋友多學一些科學觀念.

繼續閱讀:
http://blog.soft.idv.tw/?p=989

分類
TatterTools

TatterTools中的Flash Upload安全性問題

由於 flash 在 10版之後, 透過 flash upload 的安全性有提升了, 不能使用 javascript 去呼叫 flash 的 select upload file dialog box, 所以在 TatterTools 中的發表文章的上傳組件就會因此失效.

解決的方式其實也就是把 browser 的 flash 降級成 flash 9 的版本, 但這個很怪, 因為有新版 flash 不用, 要去用舊的, 而若是升到 flash 10 又要能上傳的話, 一個是 disable browser 的 flash 功能, 但這個也很怪, 另一個則是修改一下 TatterTools 的編輯後台中的 upload module 讓 flash 失效即可.

其實 TatterTools 後台, 使用 flash upload 可以做多檔 upload, 但若沒有透過 flash 的話, 則是走 web upload , 一次只能上傳一個檔案, 雖然會比較麻煩, 不過也算是還可以的解決方案.

需要修改的地方有兩個, 一個是在新發表文章的 /blog/owner/entery/post/index.php 調查其中關鍵字: hasRightVersion , 全文是:

var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

在下面加一行 hasRightVersion = false; 即可.

另一個位置是在修改文章的 /blog/owner/entry/edit/item.php , 一樣調查關鍵字 hasRightVersion, 一樣在偵測 flash version 後, 把該變數設為 false 即可.

修改好後, 在文章編輯後台的上傳區就會是單檔上傳的介面, 如下:
這樣一來就可以順利使用單檔上傳, 也避開了 flash 10 版安全性問題了!

分類
程式技術

在Flash中取得所在網頁及被嵌入的網址

這個題目好難下. 主要是要說明, 在 Flash 中的 swf 程式內, 如何取得該 swf 嵌在哪個網頁(url), 以及被嵌入使用的 url (註1). 以下介紹的是在 AS3 下的作法.

(註1)的部分是指 <embed src=”XXXXXXX” /> 的其中 “XXXXXXX” 的部分.

程式碼並不複雜, 主要是利用了 ExternalInterface.call(“window.location.href.toString”); 來取得該 swf 嵌在哪個網頁(url).

而被嵌入的 url 則是利用了 loaderInfo 中的 loaderURL 取得, 程式碼如下:

import flash.external.*;

var strUrl:String;
var strQueryString:String;

strUrl = ExternalInterface.call("window.location.href.toString");

strQueryString = "";

var params:Array = strUrl.split('?');
if(params.length>1)
{
    strQueryString = params[1];
}

var strEQueryString:String;
strEQueryString ="";
for (var s1:String in this.loaderInfo.parameters) {

  strEQueryString += s1 + "=" + this.loaderInfo.parameters[s1] + ";";
}
 
 
output_txt.text = 
  "Result:\n"+
  "location="+strUrl+"\n"+"querystring="+strQueryString+"\n"+
  "embed-url="+this.loaderInfo.loaderURL+"\n"+
  "embed-querystring="+strEQueryString+"\n";

取得第一個部分, 是取出整個 url 後, 再自行解析 (parse) 出 querystring 內容. 而在第二個部分, 因為是使用 loaderInfo, 所以 querystring 的參數可以直接使用 parameters 來取得.

sample link : http://sample.diary.tw/21/sample.htm?q1=123&q2=456&q3=789

其中 embed 的內容為: location.swf?eq1=abc&eq2=def 所以出現的結果如下:

參考資料:
http://ccutmis2.spaces.live.com/Blog/cns!F858878FA572B430!1016.entry
http://mc-computing.com/Languages/ActionScript/Getting_html_data.html

分類
程式技術

Silverlight 3支援h.264耶

Silverlight 3甫上線, 多很許多有用的功能, 今天來談有關於可以播放 h.264的功能. 的確, 經過測試的結果, 果然是可以播放 h.264 (一樣透過 MediaElement 這個媒體播放器來播放即可), 不過相對地, 也可以利用這個功能來播放 youtube 上的 h.264 壓縮的影片囉.

以下使用測試的方法, 主要是用來驗證 silverlight 3 player 可以播放 youtube 上的 h.264 的影片, 目前的做法如下:

  1. 找一個 silverlight 的 player (使用現成的 JW WMVPlayer – http://www.longtailvideo.com/players/jw-wmv-player/ )
  2. 利用 Bookmarklet 將 youtube 上的影片來源找出來, 參考資料: http://googlesystem.blogspot.com/2008/04/download-youtube-videos-as-mp4-files.html
  3. 根據上面 2. 的內容, 將其餵給 silverlight 3 player (JW WMVPlayer), 就可以直接播放了, 效果還不錯

不過實務上, 自己下載影片下來, 在自己本機 play 還很單純, 不過若是要直接播放, 就得利用上面的 Bookmarklet 來調整, 如此一來, 便能利用 silverlight 3 的播放器來播 youtube 的內容, 不過請特別注意, 本範例測試網站是為了測試 youtube 的 h.264 影片是否能被 silverlight 3 播放器播放, 所以實作了這個案例. 讓大家參考一下實際的播放效果, 不過會和 youtube 的官方規範有一些衝突(http://www.youtube.com/t/terms), 這個要請大家留意一下.

範例測試網站: http://sample.diary.tw/silverlight/

分類
程式技術

免費的圖表工具-FusionCharts Free

之前介紹過 XML/SWF Charts , 可以參考這篇: XML/SWF Charts好用繪製圖表組件 https://diary.tw/archives/316 , 這裡要介紹另一個好用的組件, FusionCharts Free (http://www.fusioncharts.com/free/), 為什麼說是 Free 呢, 因為, 他也有付費的版本, 而這個 Free 的版本是要免費給大家使用, 並且進一步使用那家公司其他的工具(再來付費), 真是不錯的好方法.

這個組件是用 flash 實作的, 提供了以下種類的圖表,

  1. 3D/2D Column & Bar Charts
  2. Line Charts
  3. 2D/3D Pie & Doughnut Charts
  4. Area Charts
  5. Stacked Charts
  6. Candlestick Charts
  7. Funnel Chart
  8. Gantt Chart

比較特別的是這個 Gantt Chart, 一般的繪圖組件, 比較少見這個類型的圖表, 十分特別, 其他的圖表也都很美觀, 而接下來我們就來進行實作吧.

該元件有支援中文, 不過輸出中文的資料檔要有 BOM, 也就是 UTF-8檔頭, 否則不能輸出正確的中文, 我們以簡單的一個 Line Chart 來看.

基本上, 要畫一個 Line Chart 使用的元件是 FCF_Line.swf 這個 flash 組件, 而餵給他的參數共有 &dataURL=data1.php&chartWidth=640&chartHeight=480, 其中的 dataURL 為另外的一支餵資料的程式, 可以是任何型態的 server 程式碼或是靜態的網頁, 而 chartWidth 及 chartHeight 則是圖表的寬高. 若是要給中文, 一定要用 UTF-8 with BOM 的方式, 才能正常顯示中文.

再來就是這個 data1.php 的內容, 基本上有幾個重點, 先看圖形根節點:

<graph
baseFont="system"
caption="年度銷售"
subcaption="台北地區"
xAxisName="月份"
showNames="1"
showValues="0"
formatNumberScale="0"
decimalPrecision="0" >

其中 baseFont 是指定字型, 若是中文, 儘量用 “system” 這個字型, 而 caption 就是圖表標題, 而 subcaption 是副標, 會在標題下方, xAxisName 是 x 軸說明, showNames 是 x 軸資料的名稱是否要顯示(本例為 1, 2, 3, .. 12), showValues 是指每個資料點上的值是否要秀出, formatNumberScale 是用來表現大數字時, 是否要用 k, m 等來表示, 如 30,000 會顯示為 30K, 而 decimalPrecision 則是指要小數點幾位.

再來是資料內容, 被包在 <graph ></graph> 這組內, 現在要 demo 是簡單版的, 就是只有一個數值要繪製, 可以直接將 name value 放成資料在上面的 graph 裡, 以此例來看, 就是這樣:

<set name="n1" value="12000" hoverText="name1" />
<set name="n2" value="19000" hoverText="name2" />
....

其中 set 是一個一個的資料, 而 name 是在 x 軸上的名稱, hoverText 是當 mouseOver 時, 會在數值點上的名稱, 整個秀出來的結果如下:

可以參考這個 sample: http://sample.diary.tw/19/chart1.php , 資料在此: http://sample.diary.tw/19/data1.php , 其中的 flash 語法如下:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="640" height="480" id="Line" >
  <param name="movie" value="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" />
  <param name="quality" value="high" />
  <embed src="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480"  quality="high" width="640" height="480" name="Line" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

這樣就能順利繪出所需要的 Line Chart 折線圖了.

至於多數列的部分, 這裡再整裡一下, 多數列會面臨不能用一個 <set > 將資料標籤和資料值組包在一起, 所以需要分開作, 而且, 重點在於多數列使用的 swf 組件為 FCF_MSLine.swf, 原來的 FCF_Line.swf 只能畫單數列.

graph 的部分不變, 用法相同.

再定義 x 軸, 如下:

<categories>
<category Name="Jan" />
<category Name="Feb" />
...
</categories>

再定義數列, 此例為兩列數列:

<dataset seriesName="PC" color="aabb00" anchorBorderColor="aabb00" anchorRadius="4">
<set value="12000" />
<set value="19000" />
...
</dataset>
<dataset seriesName="NB" color="00aabb" anchorBorderColor="00aabb" anchorRadius="4">
<?php
<set value="17000" />
<set value="22000" />
...
</dataset>

最後一樣用 </graph> 包起來即可, 範例在此: http://sample.diary.tw/19/chart2.php , 其資料在此: http://sample.diary.tw/19/data2.php

PS 注意以上範例的 value 都利用 php 亂數產生的, 所以每次值會不同, 而這組 swf 圖表的好處是若只要用 Line Chart 則使用 FCF_Line.swf , 而多組數列, 則用 FCF_MSLine.swf 都是獨立 swf 組件, 而且, 餵給他的參數中 dataURL=[filename] 的部分, 不需要再自組亂數在後面(避免 cache 問題, 因為他會自己加, 如下:)

那個 curr=80 就是他 flash swf 自行呼叫的加上的亂數, 比較自動一點.

結論是這組繪畫組件也十分輕量好用, 一個 swf 檔 20k 左右, 用哪一種就 embed 哪一種, 個個獨立操作, 而若不想用 dataURL 給 script 的方式, 也可以用 dataXML 將字串直接用 querystring 的方式餵給他, 就不需要再寫 script, 看實際應用方便來調整囉.

而單組和多組數列的圖表繪製使用的 swf 組件也不同, 主要由檔名就看得出來了, 就是多了 MS 的都是多組數列的哦.

有什麼問題, 大家可以一起討論看看.

分類
程式技術

詭異的dtd (flash滿版問題)

今天在處理一個妙妙妙的問題. 在 IE 下看很正常, 但在 Firefox 下看就很怪.

是一個 flash 的網頁, 內容其實只是要佈滿版瀏覽器而已, 在 IE6, IE7 下沒問題, 但在 Firefox 下, 卻是寬滿版, 高則維持原 flash 的高度(sample 內的 swf 為320*240). 我們先來看看發生的狀況, 以下 sample 連結, 請查看:

http://sample.diary.tw/16/f1.html

原始檔內容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<embed height="100%" width="100%" src="f1.swf" type="application/x-flash" />
</body>
</html>

用 IE 看和用 Firefox 看結果不同:

真是奇怪咧, 後來經檢查發現, 是和原始碼的第一行有關, 若使用了 xhtml 的 dtd 後, 就會發生這個狀況, 當把 dtd 移除後, 無論是 IE 或是 Firefox 就都可以滿版了, 可以參考這個範例連結:

http://sample.diary.tw/16/f2.html

但遵守 xhtml 是未來必經之路, 不能說拿掉就拿掉吧, 再來找看看有沒有好用的 solution, 於找到了這篇: TIPS-Get 100% Height in XHTML

裡面建議了一個蠻不錯的好方法, 就是將 html 及 body 的高度都利用 css 指定 100% 設起來後, 就可以有全高的 flash 了, 如下:

html, body
{ margin: 0; padding: 0; height: 100%; border:none; }

就能有效解決 dtd 存在的 xhtml 時, 無法滿版的問題, 重點在於 html 及 body 的 height: 100% 這件事上, 請參考範例連結:

http://sample.diary.tw/16/f3.html

而其中的 margin:0; padding:0; 是將 box model 中的邊界及位移都設為0 , 更接近滿版的狀況囉, 到此終於解決了一個詭異的 html 滿版問題了.(當然 flash 只是其中做為應用的一種啦, 其他的 html tag 也都是一樣的意思, 滿版都有這些狀況, 只是 flash 較常碰到了)

PS. 補充一下, 剛好手邊也有 IE8 , 他的狀況和之前的 IE6, IE7 不同, 由於更支援正式的規範, 反而它的行為是和 Firefox 一致哦, 不過若是切到 IE8 的 compatible view 時, 就會和 IE7, IE6 一樣囉!!

分類
程式技術

silverlight大放送-hosting 10GB大空間

真的太棒的消息了. 微軟 live.com 線上服務提供免費的 Silverlight Streaming Hosting 服務.

這項服務不只有 hosting Silverlight 的 Application, 更進一步 hosting WMV 檔案(其實是 for silverlight 的媒體檔). 這個服務這樣免費的方式居然還提供了 10GB 的空間, 真的還蠻驚人的. (去年是 5GB)

我們來分析看看微軟的這項免費服務. 其實 Silverlight 已經出來了一年半了, 不過實際上使用的還真的不是很多, 案例能找到的相當有限, 微軟當時是有一個集結 Silverlight 應用的網站, 在其內的 showcases 收集了相當多的應用實例, 不過到目前為止, 也只有 326 個網站. 其實說少不少, 不過對微軟來說, 我覺得真的沒有達到預期的使用量及效果.

不過 Silverlight 真的是外行看熱鬧, 內行看門道, 大家的重心是放在和 Adobe Flash (或 Flex, AIR)的一個競爭產品, 但微軟才不將這個放在眼裡呢! 微軟的下一代重要 GUI 的基礎 WPF是非常重要的一個里程碑, 而在 WEB 上應用的 silverlight 是一個精簡的 WPF, 或是說 WPF 的子集, 而且到了 silverlight 2.0的版本, 更是強大, 已經是俱備了 .NET 的精簡 runtime, 地位不說也知道相當的重要. 對微軟來說, 是一個一定要攻下的山頭. 所以在推廣上, 一定是要用盡所有力氣來推廣. 無奈目前大多數的 web server 或 hosting 公司, 大多不支接支援 silverlight 1 的 xaml 或是 silverlight 2 的 xap, 導致在推廣上有蠻大的困難. 再加上 silverlight 的 “重影音” 特性, 也導致頻寬使用量極高, 在這些多重原因下, 微軟 silverlight streaming hosting 這項免費的服務就有他的必要性了.

有了這項免費的 silverlight streaming hosting 服務後, 相信對於推廣 silverlight 應該是更有利, 因為有了免費的空間, 免費的 server, 免費的流量, 看起來, asp.net 的 developer 不用這麼利多的服務還真是對不起自己咧.

接下來應該要上傳自己的 application 或是 video 來大顯身手一番囉. 若找不到品質好的影片, 可以到這裡下載: WMV HD Content Showcase

傳上了 Vista 內的範例影片的效果 (480p), 請參考範例: link

相關閱讀:
http://blog.anchi.tw/2008/06/windows-live-silverlight-stream-host.html
有感于微软SilverLight的推广

一個很不錯的 silverlight 案例:
SingTel Race 2008 : SingTel Grid Girls Heart Race

[2008/8/31 21:19]
Silverlight的狂潮已來… 該是著手好好學習及研究的時候了. 另外, Flash 還沒上手的 Developer, M$ 提供了另一個立足點平等的時間, 快點來學習這個很讚的好物囉….
微軟MSDN Silverlight開發工具及技術文件
Silverlight 中文維基
Microsoft Silverlight – Wikipedia
狂想成真時,談Silverlight 2.0
WPF, Silverlight 與 Silverlight Streaming