顯示具有 Video 標籤的文章。 顯示所有文章
顯示具有 Video 標籤的文章。 顯示所有文章

2010/5/20

Breaking: Download Firefox nightly and try WebM!

如果你是個關心網路影音發展的開發者,那麼快去下載今天的 Firefox nightly 吧。

方才在 Google I/O 上,Google 終於確實做了大家期待他做的事情:開放 OGG Theora 的同門師弟「VP8」的編碼專利,成立 WebM 專案。目前有包括 Mozilla、Opera 以及想當然爾會相挺 Google 的一些軟硬體廠商為這項計畫站台,這很可能一舉終結目前 HTML 5 中 VIDEO 標籤的編碼大戰。

YouTube 已經開始提供 WebM 的 HTML5 版,首先以支援 WebM 的瀏覽器(例如剛剛請你快點去下載的 Firefox nightly trunk)開啟 www.youtube.com/html5 點選「Join HTML5 Beta」,搜尋影片的時候在網址後加上「&webm=1」即可。目前我還沒辦法測出來,但相信很快就可以玩玩。接下來等 WebM 的硬解晶片上場,我想這場小戰役就可以宣告終結了。財大氣粗有財大氣粗的玩法,看過富豪刑事的人一定很了解啊!

不過還是真的要說句感謝咕狗大神,總算我們可以確保網路持續開放。

2009/8/26

Put OGV on Internet Archive

我經常覺得有些選擇的出發點攸關理念,因為所謂「政治正確」的理由而下了決定。就好比因為「開放標準」、「先進技術」等品牌印象上的需求,我會希望 COSCUP 2009 所有演講影片除了傳上好用(但不完全「開放」) 的 YouTube 之外,還可以轉成 OGV 放上 Internet Archive

這次的 COSCUP 全面採用硬碟式 DV 錄影,錄下來的影片不需要再額外轉為檔案、可以直接處理。在不討論批次轉檔的情形下,Linux 裡的 OggConvert 真的是很直覺方便的轉檔小工具 —— 選、轉、完成,不用花太多腦筋,很適合我這 EndUser。轉檔所需時間要看你的設定,在我的電腦上 250 MB 的影片 (MP4, 720HD, 大約五分鐘) 要花上 12 分鐘左右的時間… 是有點久啦,或許壓縮比調整後會快一點,懶得試了 :P 轉好檔案之後就可以開始上傳。

由於影片較大,我採用 Internet Archive 提供的 FTP 上傳方式。如果你跟我一樣、是採用 OpenID 登入 Internet Archive,此時會發現一個問題:FTP 上傳需要的帳號就是你的 Email,不過密碼呢?Internet Archive 當然不會知道你在 OpenID 服務那裡設定的密碼為何,所以其實他們內部有準備另一組密碼給你,只要前往 Patron Info 裡的「Forgot Password」填上 Email 即可,系統會寄給你這個帳號的密碼 (是一組亂碼),你就可以用這組帳號和密碼登入 FTP 開始上傳囉!詳細的操作步驟,可以參考別人寫好的圖文教學

傳好檔案後還要去「Check In」,表單挺複雜、但必填的欄位不多,無論如何填好後你的檔案就會在他提供的網址上出現了。既然已經將 OGV 傳上 Internet Archive,不來試試 HTML 5 的 VIDEO 標籤不是很可惜嗎? :P

如果你的瀏覽器還不支援 VIDEO 標籤,這個網頁的寫法會自動提供 YouTube 影片供您觀賞;要是你連 YouTube 都看不了,那就只好提供一個連結讓你下載影片回家看囉!除了 Internet Archive 之外不知道還有哪個免費的影片服務可以支援直連 (HotLink)、可上傳容量又如此無限的,大家還是要支持一下介面難用的 Internet Archive 啊 XD

2009/7/24

顛覆網路 35 天:SVG + Video = 滾筒洗衣機!

這一篇,我們將再度見識混搭網際標準時可以展現的效果,先來看看範例:

View the Demo in Firefox 3.5 tristan

這個範例中,我們在 SVG 文件裡塞了個 HTML 5 的 VIDEO 標籤。以下是精簡過的程式碼:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
               width="194" height="194">
  <svg:foreignObject x="1" y="1" width="192" height="192">
    <html:video src="tristan3.ogv" ontimeupdate="rotateMePlease()"/>
  </svg:foreignObject>
</svg:svg>

播放鈕什麼的也是用 SVG 做的喔!此外這範例裡也利用了 Firefox 3.5 中的 CSS 套用 SVG 濾鏡功能,如下:

#video {
    filter: url(#filter);
    clip-path: url(#circle);
}

這個 clip-path 特性能為任何元素 (html、svg 等) 定義裁切路徑,可以是任何以 SVG 繪製好的路徑,超強的喔!例如本例裡的 #circle 路徑原始碼如下:

<svg:clipPath id="circle" clipPathUnits="objectBoundingBox">
   <svg:circle cx="0.5" cy="0.5" r="0.5"/>
</svg:clipPath>

而 filter 特性則能定義 SVG 濾鏡,本例裡我們採用的是 feColorMatrix

<svg:filter id="filter">
  <svg:feColorMatrix values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/>
</svg:filter>

影片播放後,我們利用 transformation 來讓影片元素旋轉:

function rotateMePlease() {
    // Sure
    if (!video) return;
    video.style.MozTransform='rotate(' + i + 'deg)';
    i += 3;
}

作者 Paul 把所有程式定義在 XHTML 文件中,並且處處使用良好的 XML 語法及名稱空間,不過你可能會想在 HTML 文件中使用一樣的效果。Firefox 3.5 裡可以參照外部 SVG 文件,你就不必把原本的 HTML 整個轉化為 XHTML 了:

.target { clip-path: url(resources.svg#c1); }

從這個範例裡你可以看到混搭 SVG、HTML、VIDEO 及 CSS 的威力,好好玩喔!

2009/6/18

顛覆網路 35 天 (7a): 開放影片編碼格式的品質

這篇主要比較開放影片編碼格式的品質問題,緣起是 Google 的 Chris DiBona 在 WhatWG 郵件群組貼了一篇文章,裡頭提到

如果 YouTube 要採用 Theora 編碼、還得維持目前的播放品質,那會佔掉全世界大部份的頻寬。

目前關於影片編碼的論戰已經慢慢嘴炮化、缺乏實質的比較,所以 Greg Maxwell 回了他一篇、並放上下列的比較結果。(本篇由原作者授權張貼於顛覆網路 35 天專欄,柏強我只依據往例、節譯重點。)

以下是將同一段影片分別以兩種尺寸編碼、丟上 YouTube 處理後再下載,然後與 Ogg/Theora+Vorbis 比較的情形,各位可以下載觀看以便比對。

~499kbit/sec 比較

YouTube

Download (H.264+AAC; 17MiB)

Ogg/Theora+Vorbis

Download / Watch (Ogg/Theora+Vorbis; 17MiB)

~327kbit/sec 比較

YouTube

Download (H.263+MP3; 12MiB)

Ogg/Theora+Vorbis

Download / Watch (Ogg/Theora+Vorbis; 12MiB)

位元率都分別標示出來了,而 Theora 的版本故意稍稍降一點位元率,以防止略大一些的檔案大小會被懷疑是故意提高品質。要真的公平比較的話,請把音效也考慮進去,光看靜態圖片絕非比較影片品質的好方法。這邊的靜態圖片只是為了方便讀者而做。

製作方法

以下是這四個檔案的完整製作方法:

  1. 影片來源是 Blender 基金會以創用 CC 授權的動畫片 Big Buck Bunny,版權無慮。在此使用 media.xiph.org 上下載的無失真 640x360 PNG 與 FLAC 版。
  2. 以 ImageMagick 的轉換工具重新取樣成 480x270。
  3. 使用 gstreamer 的 jpegenc,設為 quality=100 的 mjpeg + PCM,產出大約 1.5GB、位元率約為 20Mbit/sec 的檔案。
  4. 將檔案裁剪至 1G 以便符合 YouTube 的限制,產生 input_mjpeg.avi 檔 (706MiB)。
  5. 將檔案上傳到 YouTube,交給它轉換。
  6. 下載 YouTube 產出的 FLV 即 H.264 格式檔,工具很多種、在此用的是 keepvid
  7. 將原始的 input_mjpeg.avi 以 libtheora 1.1a2 與 Vorbis aoTuv 5.7 產出位元率約當於 499kbit/sec 的檔案,這個數值與 YouTube 產出的檔案相同。
  8. 將 input_mjpeg.avi 再重新取樣產出一個 400x226 的檔案。
  9. 接下來步驟同上一個檔案,最後再以一樣 libtheora 1.1a2 與 Vorbis aoTuv 5.7 產出位元率約當於 327kbit/sec 的檔案,這個數值與 YouTube 利用 400x226 的影片產出的檔案相同。

Greg Maxwell 的結論

  1. 較低品質的兩段影片很難辨出高下,而就算是高一點的品質、YouTube 目前所採用的方式也不見得就高到哪裡去。這樣的品質下四段影片檔必定各有缺點,而取捨就見仁見智。
  2. 就以我 (Greg) 的觀點,在 327kbit/sec 的影片 Theora+Vorbis 的格式遠勝過 YouTube 使用的 H.263。遇上聲音更明顯:Vorbis 版可以聽到片頭的蟲鳴、而 YouTube 的檔案中就聽不見了。
  3. 高品質的部份,在細細比較後可能大家會比較偏好 H.264 的版本,但差異不很大,大部分的人應該都分不出來。

Greg Maxwell 的信件可以查閱原文

更高畫質的影片呢?

拜我偷懶到今天才動手看這篇所賜,有另一篇補充的文章可以即時一併翻譯。Maik Merten 為 HD 畫質的影片也做了比較,截圖如下:說實在差異不大,而且 Theora 的仔細看感覺好像還比 H.264 更好 (注意頭髮的地方)。別忘了看看影片來比較喔:

所以綜上所述,別嘴炮了,要比較畫質還是實際用眼睛看看吧。

2009/1/19

摩茲連續聚 5: 使用者證言影片

第四 (五?) 次的摩茲連續聚也結束了,先送上兩段「使用者證言」影片給各位瞧瞧,其他的回顧稍晚再補…

2009/1/7

Google 協作平台「加入本站」範例

Google Sites 缺乏提供大眾申請加入本站一同編輯的機制,但你可以利用 Google Docs 拼湊出來。這邊提供一個申請頁面範例以及可以直接使用的報名表樣本,若仍有所疑慮、可參考隨附影片加以設定。

複製報名表樣本

在 Google Sites 上放入報名表

2008/3/11

Twitter 簡單說

雖然 dotsub 上原先已經有人翻好了,不過我還是手癢修改一下... anyways 這可以讓你對朋友解釋 Twitter 是啥玩意:

Lee LeFever, CC: by-nc

2008/3/9

訂閱 ETToday 影音新聞 Videocast

如前前一篇所說,這是用 Y!Pipes 拼湊出來的 ETToday 影音新聞 Video Podcast。有了這玩意,你就可以用 Miro、iTunes 等軟體訂閱收看這些新聞。首先請點選分類連結,然後下方會跳出供你以 Miro 快速訂閱的按鈕。如果你不用 Miro,請複製 Videocast RSS 網址,再以其他軟體訂閱。

另外,我也一並提供「過水」完畢的 UTF-8 版 ETToday 新聞 RSS,供其他 mesh up 使用

即時 影劇 政治 運動 生活 社會 旅遊* 消費 科技 謠言* 財經 英文*

分類標籤後方加上 * 標記者,代表我猜測這個「頻道」不會有影音節目,但為求完整還是都貼了上來,請自便。附帶一提,我僅提供以 Videocast 軟體訂閱 ETToday 新聞的方法,你以此訂閱、下載節目,下載後要怎麼處置那些影片就不干我的事了。

訂閱 Peopo 公民記者部落格影音新聞

前一篇所說,我用 Y!Pipes 做了方便訂閱 Peopo 公民記者部落格影音新聞的玩意,幫你把一般的 RSS 變成含有影音物件的 Videocast feed,如此一來你就可以利用 Miro、iTunes 等軟體訂閱收看。這邊協助你輕鬆訂閱你喜歡的公民新聞:

  1. 首先連上 Peopo 的影音新聞區,隨便找個有興趣的標題點下去
  2. 看完那段影片後,對類似的議題有興趣的話,請點下右手邊的作者相片,這會帶你到他的 blog (例如「飄泊新聞網」)
  3. 大致瀏覽一下對方的 blog 首頁,如果確定想持續收看這系列的報導,請複製網址,貼到下面的表單中,點選「給我影音 RSS」就行了。(如果你有安裝 Miro,請直接點選訂閱鈕;不想裝 Miro 者可以複製 RSS 網址以別的軟體訂閱)

以 Peopo 的公民新聞來說,每個公民記者都是跑自己有興趣的線、報導自己關心的消息,所以若你對他兩三篇文章都有興趣,那麼很可能他的報導都會是你的菜 -- 反正要是不合胃口,取消訂閱就是囉!

如我在 Y! Pipes 網頁上寫的,目前這個「程式」還有點問題:如果對方的部落格不提供 RSS,為尊重作者選擇,這個小程式也不會產出影音 RSS。如果你真想要,可以稍微修改一下我的 Pipes ,直接改採 parse html content 的方法新增文字內容。(看不懂這句話的朋友,跳過就是了,不重要)

Yahoo! Pipes 與 Videocast

自從用了 Miro 之後,我經常看看 Miro Guide 上有沒有什麼新玩意,不過看來看去都是外文實在有點煩。俗話說:「天助自助者」,所以我又來自助了... ㄜ,不是自己錄,自己錄影啥的門檻畢竟比較高,況且我是想要看不是想要製播啊 orz

國內其實有些網站都會不定時提供一些線上新知影片,例如 Peopo 公民新聞網提供了影音部落格功能、讓公民記者們上傳自己拍攝的新聞報導;又例如 ETToday 也會在網站上放入東森新聞的影音片段。這兩者似乎是不錯的 Video Podcast 標的,但卻都沒有提供這項功能。Peopo 我還蠻相信是資源有限,ETToday 的話... 大概不是沒想到就是想讓人看廣告吧?無論如何,完成的話大概是像這樣:

Videocast in Miro

哈!這樣方便多啦!怎麼做的呢?Yahoo! Pipes 是懶人的好朋友 (連我女友看到介面都說「好可愛」,你看多有吸引力!)
稍候再分兩篇獨立的 blog post 方便大家直接新增這些 Videocast,這篇就先做經驗談就好。由於你完全可以看到 Yahoo! Pipes 裡各項 Pipe 的原始「碼」,所以就不多做解釋,有興趣的可以自行前往參考。以下僅列一下實作上的心得:
  • 如果 source feed 不是 UTF-8 編碼,可用 Feedburner 過水一下
  • Flash Video 的 MIME Type 是 video/x-flv
  • 如果想要為原有的 Feeds 「新增」元素 (例如 Podcast 會用上的 enclosure),可先以 Operators>Rename 來隨便複製幾個既有元素,再用 Operators>Regex 來指定內容及屬性值。
  • 目前似乎依然沒辦法單獨將某 source 的屬性值「抽」出來移做它他用 (例如要將網址抽出、取回該網址來分析),有個方便的方法是利用 Operators>Loop、裡頭嵌入另一個 Pipe,而那個「sub-Pipe」裡頭用個 User Input 來接原 Pipe 傳來的值,再行運算後傳回。例如這個
又,本來因著 Portnoy 的要求,我也想來做個 I'm TV 的版本,不過大敗。有段演算法在伺服端完成,我沒辦法兜出來... 這樣就很明顯是不讓人下載了,那就先跳過吧。

這篇順便實驗一下 Zoho Writer 的發佈功能,希望連 Tag 都可以上去!Zoho Writer 的離線功能真的超好用。

Technorati Tags     ,,,,

2008/2/8

我推薦的網路影片清單

由於 Miro (即將) 推出 Revision3 的客製版,所以開始接觸這個由 digg 創辦人 Kevin Rose 參與建立的網路電視台。它真的是為我們這種對於網路、資訊產業及商業都有濃厚興趣人設計的:我現在有訂的節目是 Tekzilla (軟硬體資訊)、The Revision3 Gazette (看看人家怎麼搞網路電視台)、The GigaOm Show (資訊與商業,這期訪問 Mozilla 新任執行長 John Lilly、我還沒看),其他還有不少有趣的東西,值得參考。

看了這麼多影片,總像所謂的「網摘」一樣,有些想推薦別人看的片段。Miro 內建了一個分享網路影片的功能「Post to Video Bomb」,利用這玩意可以很方便地將某段你喜歡的影片網址送上網路,就好似 del.icio.us (推推王、HEMiDEMi) 的影片網址專用版。藉由這個功能,你也可以很快做出一份推薦網路影片的 Video Podcast 讓其他人以 iTunes、Miro 同步下載你推薦的影片。所以這是我的推薦影片清單:

Subscribe with Miro Video Player

如果你不用 Miro,那麼可以使用這個 Video Podcast 的 RSS 網址。使用 Miro 搭配 Video Bomb 的好處之一是每段影片的「來源 RSS」都會忠實記錄下來,所以如果你發現某頻道的影片很對你胃口、那麼可以考慮直接訂閱其原始來源。

如果你還不知道 Miro 是什麼,看看之前的介紹及教學吧!(啊... 我的教學文章斷頭好久了啊...)

Technorati Tags: , ,