分類
.net

LOG4NET的基本操作

這個 LOG4NET是用來做 .net 應用程式LOG使用的套件, 主要用來做除錯, 線上系統記錄, 稽查等應用時可以用來做記錄的套件, 是基於 Apache Project 下的專案, Open Source.

這裡做個簡單的基本介紹, 其實這套件功能十分強大, 可以只利用 config 檔就可以做得很多深層的設定, 並加以記錄, 而不用改到主程式. (當然, 前提是在主程式內必須要下對應的 log information 才行)

首先先到官方網站下載此專案, 這裡建議抓 compile 好的版本, 內含有說明文件:

http://logging.apache.org/log4net/download_log4net.cgi

這頁下的 log4net-1.2.11-bin-newkey.zip , 下載解開後, 裡面主要是 compile 好的 binary 檔, 找到 bin/net/[版本]/release 下的 log4net.dll 檔, 複製到自己的專案中, 就算初步完成了.

接下來就是在自己的專案裡加入參考 (reference), 並使用它的 namespace:

using log4net;

接下來就是設定 config file, 先列出下面 config xml內容:

<configSections>
    <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net" />
</configSections>

<log4net>
    <logger name="loginfo">
        <level value="INFO" />
        <appender-ref ref="InfoAppender" />
    </logger>
    <appender name="InfoAppender" type="log4net.Appender.RollingFileAppender">
        <param name="File" value="Log//info.log" />
        <param name="AppendToFile" value="true" />
        <param name="MaxFileSize" value="4096" />
        <param name="MaxSizeRollBackups" value="10" />
        <param name="StaticLogFileName" value="false" />
        <layout type="log4net.Layout.PatternLayout">                
            <param name="ConversionPattern" value="%date [%thread] %-5level %logger - (%file:%line) %message%newline" />
        </layout>
    </appender>
</log4net>

其中的 section name = log4net 是用來說明會有一個 config section 是給 log4net 用的, 而下面的 log4net 才是真的 config 要寫的內容.

這裡只建了一個 logger, 名為 loginfo (名稱可以自訂), 然後 appender-ref 設為 InfoAppender 就是指向再下面的 appender , 這個 appender type 設為 RollingFileAppender 是用檔案來記錄用, 其他內容說明如下: (logger 也可以是 database 等其他的輸出裝置, 這裡以檔案為例)
File: 檔名
AppendToFile: 是否要寫到檔案
MaxFileSize: 單一 log 檔大小上限 (bytes)
MaxSizeRollBackups: 多少檔案一個循環, 當達到 MaxFileSize 時, 會自動附上 CurBackups 來檔案獨立出來, 並於達到這個數值時, 再重頭用(overwrite).
StaticLogFileName: 若設為 true, 則會以 File 名稱為 log檔名, false 則會以 [file].yyyy-mm-dd 的方式記錄
下面的 layout 則是用來設定 log 內容的欄位, %date 是日期時間, %thread 是執行緒, %level 是記錄層級, %logger 是 logger 名稱, %file %line 是原始程式檔名及行數, %message是 log的內容, %newline 就是換行了.

接下來就是在程式內呼叫的方式, 程式如下, 以 asp.net 為例:

protected void Page_Load(object sender, EventArgs e)
{
    log4net.Config.XmlConfigurator.Configure();  
    ILog infologger = LogManager.GetLogger("loginfo");

    infologger.Info("Page_Load - useragent:" + Request.UserAgent);
}

在 page_load 時, 使用 Config.XmlConfigurator.Configure() 將 log4net 的 config 載入, 然後建立一個 ILog 的 interface, 利用 LogManager.GetLogger(“logger name”) 來取得 logger, 再來利用 .Info(“message”) 方法來將要記錄的 log 內容寫入 log 檔.

而除 Info 方法外, 還有 Debug, Error, Fatal, Warn 共計5個 log level.

最後以 asp.net 做的 log 內容如下:

2013-03-13 15:30:37,925 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:42,721 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:46,456 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:46,800 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:47,112 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:47,393 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:52,065 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/5.0 (Windows NT 5.2; rv:19.0) Gecko/20100101 Firefox/19.0

是不是很容易上手呢, 大家可以再試看看!

官方說明文件:
log4net SDK: https://logging.apache.org/log4net/release/sdk/
RollingFileAppender: https://logging.apache.org/log4net/release/sdk/log4net.Appender.RollingFileAppender.html
其他的 Appender: https://logging.apache.org/log4net/release/sdk/log4net.Appender.html

繼續閱讀:
http://biancheng.dnbcw.info/c/72275.html
http://blog.csdn.net/javc/article/details/4022677

分類
Javascript

反向排序內容(倒排)

今天在整理 http://sample.diary.tw/ 時, 發現 sample 愈來愈多了, 而且內容是由舊往新排, 想說把它反過來排, 新的放在上面, 舊的在下面.

由於內容不多, 把 <li> 手動一筆筆排一下應該不會花太多時間, 不過又想到應該是要用指令來才有效率才對, 於是想說用 sort 指令來操作, 發現 sort 功能強大, 要用來做倒排反而不是很快速方便.

乾脆又來動手寫個小程式好了(又是一個 sample): http://sample.diary.tw/31/1.htm 只利用了 javascript 的 array 功能, 馬上就寫好了一個反向排序功能(倒排功能), 用法很簡單, 就是把文字內容貼進去, 按下[反向排序]按鈕, 就會倒排完成.

程式如下:

//var arrData = document.getElementById("data").value.split("\n");
//arrData = arrData.reverse();
//document.getElementById("data").value = arrData.join("\n");
document.getElementById("data").value = document.getElementById("data").value.split("\n").reverse().join("\n");

前三行可以簡化為最後一行, 簡單說明, 就是把 textarea 內容取出, 用換行 split分割為陣列, 再用 reverse 倒排後, 再利用 join 用換行合併, 塞回去原本的 textarea 完成.

所以現在的 http://sample.diary.tw/ 是由新到舊排了!

分類
Blog服務

Line分享按鈕及連結

早期利用 Facebook 的讚及分享按鈕, 現在看到愈來愈多的網站有提供 Line 的分享按鈕, 不過目前是提供手機版的網頁來應用, 官方有說明的文件, 不過只有日本版:

http://media.line.naver.jp/howto/ja/

應用指令如下:

http://line.naver.jp/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

其中的 <CONTENT TYPE> 目前也就 text 而已, 而重點在於 <CONTENT KEY>, 內容主要是代入傳遞的內容, 可以傳入任意不違反 line 傳送內容規定的文字, 記得要用 utf-8 編碼.

實際上應用還蠻簡單的, 就是傳遞訊息出去, 所以一般我們會需要傳遞的就是網頁標題及連結, 而組合的方式就是利用一個換行符號 %0D%0A 這樣, 整個組合起來如下:

http://line.naver.jp/R/msg/text/?test%20message%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F

上面的內容就是傳遞如下訊息:

test message
http://line.naver.jp/

傳到 line 應用程式中的 http:// 連結, 會自動轉成 url 連結的型態, 也就可以正常讓收到訊息的人利用該 url 來進行連結了.

範例連結: http://sample.diary.tw/30/1.htm

該頁利用 javascript 將傳遞的訊息及 url 組合好, 再傳遞到 line app 中, 很容易理解.

function sendtoline(){
    var link = "http://line.naver.jp/R/msg/text/?";
    link += encodeURIComponent(document.getElementById("msg").value) + "%0D%0A" + encodeURIComponent(document.getElementById("url").value);
    location.href = link;
    return false;
}

試看看在你的手機版網頁上加上 line 的分享吧!

繼續閱讀:
http://sofree.cc/line-share-button/

[2013/5/23 15:39]
補充一下, 利用這樣的重導, 實際上在 MOBILE DEVICE 上的工作狀況又是如何呢?
在 iPhone 上會導入註冊的 protocol: “line:/”, 而在 android 上則是會使用 intent:/ 語法來達成呼叫 line 應用程式出來.

[2015/11/16 13:35]
中文設置說明連結: http://media.line.me/howto/zh-hant/
語法的部份如: http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

[2020/11/18 18:33]
若是 wordpress 下, 配合 Jetpack 的分享按鈕設定可以參考: https://prstudio.idv.tw/wp%E5%B0%8F%E6%8A%80%E5%B7%A7%E5%8A%A0%E5%85%A5line%E5%88%86%E4%BA%AB%E6%8C%89%E9%88%95/

分類
數學

中國剩餘定理

這是個古老的數學問題, 當然也有對應的解法. 在解這個數學問題之前, 我們先來看簡單一點的題目, 就是相同餘數的數字.

舉例來說, 某數除以 7 餘 4, 除以 13 也餘 4, 則某餘最小的自然數為何?

計算方式還蠻單純的, 就是 7 和 13 的最小公倍數, 再加上 4 即得, 如下:

lcm(7,13) = 91, 由於兩數互質, 所以最小公倍數就是該兩數的乘積, 故答案則為 91 + 4 = 95

另一個變形的題目, 某數除以 7 餘 5, 除以 13 餘 11, 除以 15 餘 13, 則某數的最小自然數為何?

再看一下題目, 雖然和上面的同餘數不太一樣, 不過有個規律, 就是都差 2 就會整除, 也就是雖然餘數不一樣, 但同樣少了 2, 所以計算方式也很類似, 找出 7, 13, 15 的最小公倍數, 然後減 2就是答案了, 如下:

lcm(7, 13, 15) = 1365, 故答案為 1365 – 2 = 1363

以上兩種都是比較單純的餘數問題, 再來看看這個中國餘數定理的問題:

孫子算經中的: 有物不知其數,三三數之剩二,五五數之剩三,七七數之剩二。問物幾何?

換成數學白話, 某數除以 3餘 2, 除以 5餘 3, 除以 7餘 2, 某數為何?

這個既不是同樣的餘數, 也不是同樣的差某一值可整除, 要如何解呢? 這時會用到一些餘數的式子, 可以先參考這裡: http://www.mikekong.net/Maths/Problems/chinese_remainder02.html

所以只需要先找出 5, 7 的公倍數, 除以 3餘 1的; 再找出 3, 7的公倍數, 除以 5餘 1的; 再找出 3, 5的公倍數, 除以 7餘 1的, 如下:

找出 5, 7 的公倍數, 除以 3餘 1的: 5 x 7 x 2 = 70, 該數除以 3會餘 1
找出 3, 7的公倍數, 除以 5餘 1的: 3 x 7 = 21, 該數除以 5會餘 1
找出 3, 5的公倍數, 除以 7餘 1的: 3 x 5 = 15, 該數除以 7會餘 1

然後利用:
a ≡ b (mod m) 則 ac ≡ bc (mod m) 這個式子(注意反之不然), 得
70 ≡ 1 (mod 3) … (a)
21 ≡ 1 (mod 5) … (b)
15 ≡ 1 (mod 7) … (c)
因為要除以 3餘 2, 所以 (a) x 2:
70 x 2 ≡ 1 x 2 (mod 3) … (d)
因為要除以 5餘 3, 所以 (b) x 3:
21 x 3 ≡ 1 x 3 (mod 5) … (e)
因為要除以 7餘 2, 所以 (c) x 2:
15 x 2 ≡ 1 x 2 (mod 7) … (f)

再利用:
a ≡ b (mod m) 則 a + c ≡ (b + c) (mode m) 這個式子,
並綜合以上 (d), (e), (f) 得該數應為
x ≡ (70 x 2 + 21 x3 + 15 x 2)(mod 105)

所以最小的某數應為 23, (即 70×2 + 21×3 + 15×2 – 105×2 = 23)

相關閱讀:
http://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9B%BD%E4%BD%99%E6%95%B0%E5%AE%9A%E7%90%86
http://www.mikekong.net/Maths/Problems/chinese_remainder02.html
http://www.geocities.ws/goodprimes/SCCongruence.html

分類
WebTrend

WhatsAPP要收費-很合理啊!

先說, 我沒有在用 WhatsAPP.

iPhone版本的 WhatsAPP 本來就是收費的, Android 版本的, 是首一年不收費, 第二年起收費, USD 0.99, 很合理啊!

使用者付費, 本來就很合理, 再加上這個費用遠比上網傳輸費及通話費便宜的多了, 有什麼好抱怨的呢? 最重要的, 這個 APP 在安裝時就很明確的說明一年免費, 第二年起才收費, 試用的時間夠久了吧!(我承認這也是一種強大的行銷手法, 一年免費)

比起手機, 比起皮包, 比起吃飯, USD 0.99 是有貴嗎?

當然啦, 想轉台就轉台囉, 免費的通訊軟體多的是, 什麼好用什麼不好用, 哪種習慣, 哪裡的朋友多, 見人見智了, 但沒必要在抱怨這件事吧! 新聞也報的好像收費是什麼天大不了的事, 真的怪哉!

分類
WebTrend

Amazon Elastic Transcoder

今天收到了AWS的通知信, 有個新上線的服務Amazon Elastic Transcoder, 用來做影音的線上轉碼, 網址說明在這裡

http://aws.amazon.com/elastictranscoder/

這個服務提供很容易的方式將影音的格式進行轉碼, 可以支援的輸出格式為 h.264 + AAC 的 mp4 檔案, 當然也是目前支援性高也廣泛應用的格式, 內建的幾組預設輸出(preset)如下:

Generic 1080p mp4 System preset generic 1080p
Generic 720p mp4 System preset generic 720p
Generic 480p 16:9 mp4 System preset generic 480p 16:9
Generic 480p 4:3 mp4 System preset generic 480p 4:3
Generic 360p 16:9 mp4 System preset generic 360p 16:9
Generic 360p 4:3 mp4 System preset generic 360p 4:3
Generic 320×240 mp4 System preset generic 320×240
iPhone4 mp4 System preset: iPod touch 5G, 4G, iPad 1G, 2G
iPhone4S mp4 System preset: iPhone 5, iPad 3G, 4G, iPad mini, Samsung Galaxy S2/S3/Tab 2
iPhone3GS mp4 System preset: iPhone 3GS
iPod Touch mp4 System preset: iPhone 1, 3, iPod classic
Apple TV 2G mp4 System preset: Apple TV 2G
Apple TV 3G mp4 System preset: Apple TV 3G, Roku HD/2 XD
Web mp4 System preset: Facebook, SmugMug, Vimeo, YouTube
KindleFireHD mp4 System preset: Kindle Fire HD
KindleFireHD8.9 mp4 System preset: Kindle Fire HD 8.9
KindleFire mp4 System preset: Kindle Fire

若是內建的 preset 不夠用, 也可以自行建立 preset, 建立畫面如下:

如此一來便能建立更符合應用需求的尺寸, 不過一般來說, 內建的 preset 已經很夠用了. 另外大家有沒有注意到, 還有 thumbnails 這項, 對了, 就是產生縮圖的功能, 在轉換影片的過程中, 也一併產生縮圖, 方便在實際應用上的圖片預覽, 在預設的 preset 中也有.

再來就是計價的部分, 是以影片的長度來計算, 以最便宜的地區來看, 每一分鐘轉出的SD影片為0.015美元, 而轉出HD影片為0.03美元, 也是相當便宜呢. 將一部 120分鐘的影片轉檔為SD的格式, 只需要 1.8美元.

以實際上傳來進行轉檔, 把檔案放到 s3 中, 指定好輸入檔案和輸出檔案後, 測試一支 3:30 長度的影片, 720P轉為 480P, 16:9, 只需要不到2分鐘的時間, 效率也很不錯.

目前有每月免費20分鐘的影片轉檔試用, 大家可以來體驗看看這個新上線的 amazon 服務!

[1/30 10:57]
為能再次測試看得到的範例, 從 HD Demo world找了一支影片來測試, 網址在這裡:

http://www.demo-world.eu/trailers/high-definition-trailers.php

使用的是 BBC Germany 22.1MB 20sec

上傳到 s3 的 bucket 裡, 並開始進行轉換, 不過可能是檔案格式為 hd_distributor_bbc_germany.m2ts 是 m2ts 的格式, 所以轉換失敗, 而凌晨測試的格式是 720p 的 mp4 轉為 480p 的 mp4, 所以是順利轉出.

查了一下這個 Amazon Elastic Transcoder 支援的輸入格式說明如下:

Formats: Amazon Elastic Transcoder supports transcoding into H.264 video and AAC audio in an MP4 container. We support most common media formats for input including H.264, AAC, MP4, MPEG-2, FLV, 3GP and AVI.

看起來 m2ts 可能不被支援, 所以測試失敗.

再查了一下, 發現是輸出設定檔案衝突, 所以無法輸出, 真囧, 再次建立 job 進行測試, 於 45sec完成轉換(輸出仍為1080p-生成檔案大小為 30.9MB).

在建立 job 時, 順便看了一下 Additional Job Details 中, Input Container 預設是自動(用預設即可), 下拉後, 有格式選擇如下:

共有 3gp, asf, avi, divx, flv, mkv, mov, mpeg, mpeg-ps, mpeg-ts, mxf, ogg, vob, wav, webm 這些格式, 基本上常用的都有了.

再來繼續測試:

輸出 720p 的格式, 所需時間為 32sec, 輸出檔案大小為 16.7MB
輸出 480p 16:9 的格式, 所需時間為 61sec, 輸出檔案大小為 8.8MB
輸出 360p 16:9 的格式, 所需時間為 27sec, 輸出檔案大小為 5.2MB

雖然 480p 16:9 稍慢一點, 不過看起來可能只是一個案例, 再測一次 480p 16:9 的輸出為 51sec, 有稍快一點, 整體來說轉檔的時間真的還蠻快的呢!

分類
好用軟體

好用的HostAdmin插件-Firefox

在開發網站的過程中, 往往會需要快速地切換主機標題(即網址中的主機)對應開發環境或是測試環境的IP, 一般來說都是利用修改 %windir%/system32/drivers/etc/hosts 這個檔案內容, 並重新起動瀏覽器才能生效, 尤其像是在還未生效的 DNS 或是 SSL 等狀況下, 就顯得十分麻煩.

現在有個好用的工具 HostAdmin (link) for Firefox, 這個工具的工作原理一樣是修改 hosts 檔案, 不過在修改後, 會自動 refresh 本機 DNS, 瀏覽器也不用重新起動就馬上生效了, 而且是在狀態列就可以直接操作設定, 十分方便, 畫面如下:

可以在自行訪問的網域主機上去設定指向的 IP, 便可以快速地達到切換的目的, 而最上面的 Hosts Editor, 會叫出內建的編輯器, 直接修改 hosts 內容, 也十分方便. 多重 IP 選擇的原理就是利用 hosts 中的 # 號, 也就是註解符號, 以上圖為例, 就是在 hosts 有如下設置:

192.168.12.21 www.test.com
#192.168.12.31 www.test.com

當你訪問 www.test.com 時, 點一下右下角的 HostAdmin 插件功能, 就會出現上圖畫面, 方便你直接作切換.

另外有需要注意一點, 在 windows vista/7 時, hosts 檔案的權限修改時會失敗, 是因為權限有調整為管理員才能修改, 可以參考該插件的官方資料來調整該檔案的權限, 如下:

http://code.google.com/p/fire-hostadmin/wiki/GAIN_HOSTS_WRITE_PERM

建議的兩種方式都必須由本機管理員下達修改檔案權限的指令, 一為調整為 user group 有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G Users:W

一為調整為某單一USER帳號有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G “User Account Name”:W

記得都要以管理員來執行, 若不會操作, 簡單說明如下:

  1. 點下[開始] [所有程式] [附屬應用程式]
  2. 看到[命令提示字元] 對該項目按下右鍵, 選取[以系統管理員身份執行]
  3. 出現一個 console 畫面, 並有輸入提示符號, 鍵如上面兩個指令其中一項皆可, 記得第二項的 User Account Name 是指某單一 user 的帳號, 通常是目前自己這個帳號.
  4. 系統會回應已處理檔案 C:\Windows\system32\drivers\etc\hosts 這樣就成功了.

相信對於常在修改調整 hosts 的開發者朋友們會有很大的幫助!

該插件的官方網址: https://addons.mozilla.org/zh-tw/firefox/addon/hostadmin/

分類
好用軟體

產生任意大小的圖片-fakeimg

一般在做網頁時, 若一時需要一個區塊的圖片, 指定大小, 來做出一個 mockup, 可以利用之前介紹的產生任意大小的貓圖片 (link) 外, 還有剛從朋友網站 (link) 看來的 fackimg: http://fakeimg.pl/

用法還蠻單純的, 官方網站上有幾個 sample 如下:

<img src="http://fakeimg.pl/300/">
<img src="http://fakeimg.pl/250x100/">
<img src="http://fakeimg.pl/250x100/ff0000/">
<img src="http://fakeimg.pl/350x200/ff0000/000">
<img src="http://fakeimg.pl/350x200/?text=Hello">
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster">

就會有以下功能的圖片:

真的還蠻方便好用的呢!

 

[2016/6/14 12:12]

這個也十分好用, 可以參考看看: http://lorempixel.com/
內容可以指定尺寸外, 還有各式分類, 可以有更具像的圖片效果.

 

[2022/5/5 8:44]

Lorem Picsum 排版假圖產生器, 可以產生隨機、指定、灰階、模糊等指定尺寸的圖片, 並且有 API可供應用, 也請參考看看:

https://picsum.photos/

如: https://picsum.photos/300/200 (此為隨機)

指定圖片, 如: https://picsum.photos/id/237/300/200

 

 

分類
好用軟體

Youtube下載影片插件-Firefox

這個工具是Firefox 的插件, 可以方便地下載 youtube 上的影片, 而且會列出所有可供下載的解析度及格式, 插件名稱為 Easy YouTube Downloader

英文安裝下載頁: https://addons.mozilla.org/en-us/firefox/addon/easy-youtube-video-downl-10137/
中文安裝下載頁: https://addons.mozilla.org/zh-tw/firefox/addon/easy-youtube-video-downl-10137/

安裝好之後, 在瀏覽 youtube 的影片時, 會在下方多出現一個下載, 點擊後會出現所有可用的下載點, 以這頁為例: http://www.youtube.com/watch?v=tub3x22YNbk

下方下載點擷圖如下:
就有純音樂的 M4A, AAC, MP3-128k, MP3-64k, 影片的 MP4 1080p, 720p, 360p, FLV的 480p, 360p, 240p 還有一個預覽圖及說明連結, 點擊後即可下載影片, 方便使用, 真是一個好用工具啊!

分類
Javascript

Youtube影片重覆播放Bookmarklet

有時候需要重覆播放 youtube 上的影片, 當然可以透過一些參數來進行設定, 不過一時要使用的話, 可以透過這個 bookmarklet 來進行, 程式碼如下:

javascript: (function () {
    var url = location.href;
    var videoid = '';
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[7].length == 11) {
        videoid = match[7];
    }
    if (videoid != '') {
        var nurl = 'http://youtube.googleapis.com/v/' + videoid + '?loop=1';
        window.open(nurl);
    }
})();

利用這個 bookmarklet 可以在瀏覽 youtube 影片時, 想要重覆播放時, 可以按下這個 bookmarklet 來進行重覆播放, 原理就是將原來的 youtube url 找出影片 id 後, 組合出 url: ​http://youtube.googleapis.com/v/?loop=1 這樣的方式.

另外關於 bookmarklet 的新增方式, 就是直接將網頁上的連結, 拖拉到瀏覽器的書籤區即可.

請到這裡進行安裝: http://sample.diary.tw/youtuberepeat/

上面程式碼中, 找出 youtube video id 的 regular expression 是利用這篇文章中的解答: http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url

—————————-
[2013/1/12 21:04]
今天在IE上測試的時候, 發現直連的URL是無法在IE上直接打開的, 只能藉著一個宿主頁面來做EMBED程式的方式來進行, 調整了一下程式, 使目標頁改為:
http://sample.diary.tw/youtuberepeat/r.html?vid=

即可帶出對應的播放器, 並能在播放後再自動播放, 不過在這段測試時, 發現這個 loop=1 的參數有時有功能, 有時沒有功能, 在對照了 http://www.youtuberepeater.com/ 網站時, 發現再加一個參數能確保正確 loop, 就是 version=2 的參數, 在 http://sample.diary.tw/youtuberepeat/ 上的兩個 bookmarklet 一併做調整, 也就是原本的改為
http://youtube.googleapis.com/v/?loop=1&version=2
而新做的第二個有宿主的bookmarklet 中的 embed參數也補上.