My Program ::

VideoJS-HTML5的影片播放器

程式技術/Javascript 2011/02/19 23:19

views: 80919 times

VideoJS-圖片引用自http://videojs.com/

瀏覽器支援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/ 真的還蠻方便的呢!

TAG css, html5, javascript, video, videojs

Trackback 0 : Comment 2

實用解析度大剖析

懶得分類 2010/02/10 16:56

views: 81448 times
在實作 video 播放器時, 或是做 video 解析度判定時, 往往有許多專有名詞跑出來, 像是 VGA (640*480), NTSC (720*480), 再加上有一些小的解析度, 搞得很多名詞, 很多解析度出來, 這裡一次做一彙整, 把資料名稱和來源及解析度整理清楚. 也方便日後使用.

小尺寸的 CIF: (資料來源: http://zh.wikipedia.org/zh-tw/%E9%80%9A%E7%94%A8%E5%BD%B1%E5%83%8F%E5%82%B3%E8%BC%B8%E6%A0%BC%E5%BC%8F)

共有:
SQCIF 128 × 96
QCIF 176 × 144
CIF 352 × 288
4CIF 704 × 576
16CIF 1408 × 1152

其中 CIF 是 352 × 288, 而 Q 就是指 1/4, 所以各維度減為一半, 而 4CIF 則是 4倍, 也就各維度是 2倍長, 16CIF 則是各維度 4倍長.

再來就是較大尺寸的部分, 這張圖幾乎可以說明一切: http://zh.wikipedia.org/wiki/File:Video_Standards.svg

而顯示解析度更清楚的說明可以在這裡查到: http://zh.wikipedia.org/zh-tw/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87

內容如下:

more..

電腦標準						解析度
CGA						320×200 (16:10)
QVGA						320×240 (4:3)
B&W Macintosh/Macintosh LC						512×384 (4:3)
EGA						640×350（大約 5:3）
VGA 及 MCGA						640×480 (4:3)
HGC						720×348 (60:29)
MDA						720×350 (72:35)
Apple Lisa						720×360 (2:1)
SVGA						800×600 (4:3)
XGA						1024×768 (4:3)
XGA+						1152×864 (4:3)
WXGA						1280×768 (15:9)
SXGA						1280×1024 (5:4)
WXGA+						1440×900 (16:10)
SXGA+						1400×1050 (4:3)
WSXGA						1600×1024 (25:16)
WSXGA+						1680×1050 (16:10)
UXGA						1600×1200 (4:3)
WUXGA						1920×1200 (16:10)
QXGA						2048×1536 (4:3)
WQXGA						2560×1600 (16:10)
QSXGA						2560×2048 (5:4)
WQSXGA						3200×2048（大約 15.6:10）
QUXGA						3200×2400 (4:3)
WQUXGA						3840×2400 (16:10)
HSXGA						5120×4096 (5:4)
WHSXGA						6400×4096 (25:16)
HUXGA						6400×4800 (4:3)
WHUXGA						7680×4800 (16:10)
類比電視標準						解析度
PAL						720×576 (5:4，非正方形的像素，總體比例通常為 4:3)
PAL VHS						320×576（大約）
NTSC						720×480 (3:2，非正方形的像素，總體比例通常為 4:3)
NTSC VHS						320×482（大約）
數位電視標準						解析度
NTSC（首選格式）						648×486 (4:3)
D-1 NTSC						720×486
D-1 NTSC (square pixels)						720×540
PAL						720×486
D-1 PAL						720×576 (5:4)
D-1 PAL（方形像素）						768×576
HDTV 1080i						1920×1080 (16:9)
HDTV 720p						1280×720 (16:9)
EDTV 480p						704×480
數位電影標準						解析度
協會標準						2048×1536 (4:3)
DVD "NTSC"						720×480 (3:2)，非正方形的像素，總體比例通常為 4:3 或 16:9
DVD "PAL"						720×576 (5:4)，非正方形的像素，總體比例通常為 4:3 或 16:9
VCD "NTSC"						352×240 (22:15), though non-square pixels mean image dimensions are 4:3
VCD "PAL"						352×288 (11:9), though non-square pixels mean image dimensions are 4:3
LD						560×360

其中比較特別的就是有關於解析度項目中的"非正方形像素", 也就是說, 因為每個相素(pixel)的形狀, 並非是1:1的正方形, 也就使用原 pixel 比例和實際顯示的比例會有出入, 不過可以看到, 最後的比例會有4:3及16:9的狀況, 這是需要注意的地方.

TAG HD, resolution, video

Trackback 0 : Comment 0

如何在windows 7(x64)下擷取DV Video

好用軟體 2009/06/20 11:13

views: 44268 times
由於安裝了 Windows 7 (x64) 來測試應用狀況, 最近剛好遇到要 capture DV Video, 於是找半天, 在 os 內建的 "windows movie maker", 結果沒有找到, 但是有 "Windows DVD 製作程式". 查了 help 發現這個事實:

於是上網找了 windows movie maker 2.6 for vista 的版本來安裝 (link), 安裝倒沒問題, 不過找不到"從視訊裝置擷取" 這個選項:

所以可能是 windows movie maker for vista 在 windows 7 下沒辦法從 dv 擷取 video 出來吧, 於是只好再找看其他的 solution.

從這篇文章發現(link), 原來 live 工具組裡有個 Live Windows Movie Maker:

於是趕快抓來用看看: http://download.live.com/moviemaker, 不過很有可能新版還沒有來得及趕上線, 於是出了個 live movie maker 搶鮮版更新, 在這裡: http://www.microsoft.com/downloads/details.aspx?FamilyID=e7446634-e033-4053-acd3-a7a18ea8a1a2&displaylang=zh-tw 是將原來的使用限期由 2009/6/30 延長至 2009/12/31, 所以也就一併更新一下. 接下來的應用就很單純了, 可以利用 live movie maker 來擷取 dv 內的 video, 也就順利地解決了在 windows 7 (x64) 下截取 dv 內的 video 問題了.

擷取完成, 再配合在 windows 7 內附的 windows dvd 製作程式, 就可以順利燒出 dvd 了耶. 還真不錯哦.

記得不用再去抓 windows movie maker 2.6 for vista 了, 會遭遇無法擷取的問題. 若有人可以擷取的話, 也請留言告知一下, 看是否是什麼環境的問題, 例如是 x32 的版本還是哪裡我沒有注意到的地方.

TAG capture, dv, live movie maker, multimedia, video, windows 7, windows movie maker

Trackback 0 : Comment 0

youtube台灣官方部落格出來了

blog服務 2008/07/05 00:48

views: 58939 times
在 zdnet 網站上得到這個消息: YouTube台灣官方部落格上線, 實際去拜訪 youtube 台灣官方部落格, http://tw.youtube.com/blog, 目前只有兩篇文章, 社群網站, 這個在地的部落格對於經營會有很大的幫助, 事實上, 透過專有的地方, 與網友溝通, 互動, 對於網友及網站的活化和黏著信心可以有一些幫助. 當然, 實際上還是得看經營的手法及活化方法, 官方部落格上的任務說明如下:

公佈全球影片活動：全球各版本的 YouTube 持續舉辦各種線上及實體活動，我們將挑選最值得介紹的活動，讓你與全球社群同步脈動。
介紹台灣社群的影片趨勢：YouTuber 們的創意總令人意想不到﹔我們將不定期介紹社群的影片妙點子，讓大家知道，原來影片可以這樣玩。
YouTube 新功能：注意到了嗎？YouTube 的功能和介面持續在更新，我們也要讓你第一時間就知道。

所以重點就很明顯, 對於 youtube 對台灣網友的關心, 相信應該是更多的, 能否有效達到成效, 我們拭目以待.

TAG blog, video, youtube, zdnet

Trackback 0 : Comment 1

stage6關站囉

WebTrend 2008/03/12 01:22

views: 64525 times
最早是在 stage6.divx.com 就看到這個利用 divx 做為 codec 的影音分享網站, 由於他的品質非常好, 也可以達到幾乎HD的效果, 對於這個網站, 就常常到訪關心.

前一陣子(大約在2008年初)他整個將網域改為 www.stage6.com, 看起來應該是要獨立經營這個影音分享服務, 可以從下面 alexa 圖表得到改域名的狀況:

不過這個網站利用了 DivX 的 codec , 讓在網站上的影音分享內容也可以達到娛樂的品質, 再加上設計十分不錯的播放器(可以在 IE 及 FF 都可用), 具體的好處可以參考這篇文章:
好物!甜美的Stage6線上影音站台詳解

今天拜訪了這個網站, 發現已經貼出停止服務公告了, 看起來可能龐大的資源(包含頻寬, 服務器, 存放空間)讓他們無法繼續服務下去. 不過 divx player 仍會繼續開發下去, 也會繼續維護.

看到這樣的消息真的令人感到可惜咧. 其他相關文章:
Stage6關站了
DivX Stage6影片分享網站
Stage6:又一個科技界的嘆息! 將於2008/02/28關閉!
stage6即將於2/28關站
Stage6.com 關站了..

TAG codec, divx, HD, stage6, video

Trackback 0 : Comment 3

阿祥 2008/03/12 13:01 MODIFY/DELETE REPLY
記得兩週前就有消息提到stage6要關了吧…真的很可惜，相較一般的網路影音平台，stage6的畫質真的很嚇人…

不過最近youtube也在推高畫質影片的服務測試，但還是和stage6相差很多…
另外一提，我上星期到中華電信時，看到他們mod也開始提供hd畫質的節目，當場也是讓我很驚訝，而且據中華電信的所說，這樣高畫質的影音，並不會需要大頻寬就可以運作了，其實讓我半信半疑啦…不知道他們有沒唬攏我XD？

路過的 2008/07/28 08:26 MODIFY/DELETE REPLY
Firefox縮寫並不是FF而是Fx。
- Timothy 2008/07/28 10:35 MODIFY/DELETE
  謝謝您的提醒, 原來 Firefox 的官方縮寫是 Fx 或 fx , 感謝!! 不過還是很多人都用 FF 耶, 我想大家看得懂就好囉! 不過還是用 Fx 好了!!
  您有 Blog 可以交流一下嗎?

Write a comment

: 暱稱

: 密碼

: 首頁僅管理員可見

Youtube推出繁體中文介面(tw)版

WebTrend 2007/10/18 12:40

views: 66711 times
隨著 youtube 推出繁體中文版, 相信會有更多人台灣人使用 youtube, 不過其實 youtube 的操作並不複雜, 再加上多是看 video 的內容, 相信即使沒有繁體中文介面也不致於影響對英文看不懂的 user, 但對於台灣的用戶來說應該是一大福音.

不過還是不怎麼容易上傳成功及有時觀賞會看不到的問題還是要加強改善才是, 身為世界第一大視頻分享網站, 推出對繁體中文的版本, 真的是要給他鼓勵一下囉, 表示對繁中用戶的重視.

今天放在 tw 首頁上的 video (台灣讚啦):

真的台灣讚啦!!

相關新聞:
http://www.libertytimes.com.tw/2007/new/oct/14/today-e2.htm
http://blog.chinatimes.com/blognews/archive/2007/10/15/207304.html
http://news.sina.com.tw/tech/sinacn/cn/2007-10-18/113238199671.shtml

國內提供相關服務的網站:
http://www.im.tv/vlog (IMTV)
http://www.wretch.cc/video/ (無名小站)
http://mymedia.yam.com/ (天空)
http://vlog.xuite.net/ (hinet xuite)

TAG chinese, Taiwan, video, youtube

Trackback 0 : Comment 0

slide.com增加影片功能

blog服務 2007/09/14 01:56

views: 64684 times
之前介紹過 slide.com 的相簿功能 (http://diary.tw/tim/70), 最近發現它又提供了影片的功能, 不過不是支援上傳影片, 而是支援選擇 youtube 的影片加入特效, 相框, 及播放清單功能, 而且是直接在該 slide.com 站內做 youtube 影片搜尋後, 直接開使製作影片播放清單加特效及邊框, 試用了一下, 發現該播放清單不是自動串播的, 而是以清單的方式呈現, 也就是說播完後, 不是自動播放下一則, 而是仍出現 youtube 播完的 share 及 watch again, 看來並沒有將播放完成的事件進行處理.

而播放清單是由右上角的 more 進行選擇其他影片來進行播放, 可以參考下面的範例內嵌:

more..

TAG skinflix, slide, video, youtube

Trackback 0 : Comment 0

創作專用內容服務bubbleply

WebTrend 2007/02/11 17:38

views: 62040 times

之前介紹過了在 flickr 上的 note 功能. 請參考: http://diary.tw/tim/58
利用 flickr note 功能, 可以很容易地在圖片或相片上加上註解或說明, 可以用來做為教材或是創作補充應用, 在原始的圖片上加上一個自創的內容, 相信會對於該圖片增色不少, 而且更完整.

在影片上有家公司提供了這樣的服務: http://www.bubbleply.com
他利用其他影片上傳服務商的內容影片, 加上時間軸, 讓使用者自行發揮及創作. 這也是一個很棒的設計, 他本身不需要具備大量的空間來存放這些內容, 只需要將時間軸及 bubble (文字框)的關係記錄下來即可, 很容易地利用一個小的文字記錄, 將這些資訊保留下來, 而原始的影片仍由原來的影片上傳服務商(如 youtube)取得播放.

整個行為就是使用者下載了 swf 的播放器, 取得了影片內容, 再取得了 bubble 的腳本內容(利用 fiddler 觀察, 是利用了一個 web service 傳回 xml 的腳本文件), 之後就依影片播放及腳本內容開始呈現最後的結果, 這樣的應用, 真的是很不錯的設計, 所有的行為都在 client 端的 swf 解決了, 不太需要很強大及很大空間的負載, 又可以引人入勝, 這樣的一個應用服務是很理想的.

下面是一個範例內容:

其中左上角有個 PLY 的符號, 可以用來切換是否要出現這個 bubble 文字框, 或是只要出現影片內容而已. 試試看, 創作產生內容的遊戲開始發酵囉..

TAG bubbleply, note, video, youtube

Trackback 0 : Comment 0

HEMiDEMi影片瀏覽功能上線

WebTrend 2006/09/10 15:41

views: 77255 times
HEMiDEMi 今天在 login 的時候發現有個 video 區可以直接瀏覽 video功能. 於是點入來看看, 發現可以直接將 embed 語法嵌入, 其實也就是將 youtube, google video 的 embed 語法再利用一個欄位存入, 方便大家在線上收視這些內嵌的影片.

不用離開黑米就能預覽影片?!

more..

TAG google video, HEMiDEMi, video, vlog, vottie, youtube

Trackback 0 : Comment 0

vlog 2.0上線囉

WebTrend 2006/09/02 02:04

views: 71880 times
vlog 2.0 於 9/1 上線了. http://www.im.tv/vlog

不同於 youtube, vlog 2.0 beta 已有相當多的功能是用來建立社群的概念, 基本上, 要能有效黏著使用者是很重要的社群經營手法, 如何能有效黏著使用者? 可以從使用者習慣及方便性來著手, 另外增加成就感也是很重要的, 服務品質, 影音品質, 好友等都是重要的元素. 還有增強了不少使用者方便的功能, 利用了 web 2.0 常用的 ajax 技術, 也更增加了可用性. 使用者可自訂 layout, 自訂個性主題等, 也都相當引人入勝.

再來看一個很重要的功能, 家族, 在 vlog 2.0 beta 中, 家族相信是一個讓人與人及人與家族聚合的一個重要做法, 將原來拆散的一支一支影片(像 youtube), 變成一個人的多支影片(vlog 1.0), 又變成為多人的多支影片, 用家族的方式相信是相當恰當的. 有效地將個人影像庫, 轉變為家族或伙伴的影像庫, 集合眾人的力量來完成同質的影片集結. 從中間也可找到同好, 相信這對社群經營來說是很重要的一項功能.

另外像是 tag 功能, tag cloud 呈現, 留言次, 收藏次, 熱門(到訪), 評分(rank), 而且依日, 週, 月, 全部等方式, 將會有效幫助使用者在茫茫影像海中找尋影像.

不過目前仍在 beta 版本, 似乎還有部分 bug 及邏輯問題尚待修復, 也希望能愈做愈好, 謝謝 vlog 這樣的網站提供如此方便的服務, 也希望大家多多利用, 讓國內的最大影像庫能愈做愈棒囉!

繼續閱讀: vlog, youtube, google video
相關文章: http://www.x2y2.com/fisker/archives/06.09.02-vlog-2.0-beta.htm