隨意了解了一下 HTML5 Video 與 WebM 方面的一些實務知識,很是零亂,不記下來是忘,記下來只怕也是忘。

Google 雖然很大方的公開了 WebM / VP8 規格,其他廠商買不買單又是另一回事。也許這只是讓 Google 公司以不必付給任其他公司權利金,並且以其(買來的)技術,在規格書上攻下幾段的手段。對照之下,Firefox 不付 MPEG 權利金而只支援 Ogg,Apple 公司有財有勢就能讓自家的 Safari 播放 mp4 電影檔。Google 打出「新規格」,是好牌是壞牌還很看不明白。只能說,在 Web 的這把破傘下,開發者就是要去了解各家廠商產品的異同 - 否則無法讓內容正確地呈現在使用者眼前。由不明 / 不定規格而萌生出的各家產品戰線,正炮擊著開發者的腦。

Miro Video Converter 是第一個看見可以把影片轉成 WebM 格式的 GUI 工具,而 VLC 1.1RC 則是除了瀏覽器之外的播放程式。1.1RC 只有提供源碼下載,沒有執行檔或安裝包,但從 VLC Nightly Build 中翻找出來的,的確是可以放 WebM 格式影片。而 Miro Video Converter 基本上也只是包裝了(沒有調過的,只會吃去一個 CPU 的時間)ffmpeg 而且,轉換 WebM 影片的指令如下:

ffmpeg -i FOO.avi -f webm -vcodec libvpx_vp8 -acodec libvorbis -ab 160000 -sameq FOO.webm

另外就是 VideoJS 這個 Javascript 版的影片播放器。它所提供的 Video Control 是用 CSS 去畫出來的,確實 CSS 是很能畫各種圖沒有錯,不過它用巢狀 ul/li 來定義按鈕與填充 CSS 畫圖需要的元素令人覺得「你是不是搞錯了吧」。而 Vimeo 自家所實做的 HTML5 Video Player 則是用 canvas 去畫各個控制按鈕。也許是為了讓它長得與 Flash 版的播放器完全一樣。而兩方的播放器中的「全螢幕」鈕其實只是把影片變成跟瀏覽器的可視範圍一樣大,並不是真的全螢幕。目前 Safari5 可以在播放時,在影片上點兩下就放大成全螢幕,但播放器會變成 QuickTime,而不是網頁中自定的播放器。

此外,Vimeo 使用 video tag 的方式有些意思。一開始並沒有給任何影片網址,只是放張圖片代替。而在使用者按下播放鈕之後,再把動態指定一個網址到 video tag 的 src attribute 去。這麼做似乎有兩個特性、都能省下伺服器的頻寬:其一、來爬網頁的機器人不會直接爬到影片;其二、在需要之前,瀏覽器一定不會開始抓影片。

@tka 做了一些實驗,發現 Firefox 3.6 似乎也不是什麼 Ogg 檔案都能放。而在 Linux 上跑 ffmpeg 造出來的 mp4 檔,則需要再用 qt-faststart 去改一下 ,Safari 5 才能播放。

我另一個愛用的影片轉檔程式叫做 Videomonkey。可以把各種格式的影片轉成 iPhone 可看的 mp4。

感想?亂七八糟。