2013年5月23日

html5 媒體播放器

和一些專家討教html5播放器的問題,有些感觸和想法,所以做些記錄
首先問一下google可以找到w3c規範
http://www.w3schools.com/html/html5_video.asp

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.
</video> 

你要用video tag時基本語法如上述。
 Your browser does not support the video tag.
這一句是說如果你的瀏覽器不支援時會看到這一條。
你也可以把這一條改成之前html的影音語法
 其他詳細說明,網頁寫得很詳細。

在下面寫支援html5的影音檔有mp4 、ogg、 webm三種,如果要用video tag可能伺服器要轉檔至少二種mp4 webm或mp4 ogv。mp4非開放格式所以有一些瀏覽器不支援,而webm和ogv則為自由軟體瀏覽器所支援。

 個人也實作了一下,把新北市的nhk和下課花露米轉檔一下(我找了三台電腦轉了二天),ffmpeg實在太強了,sh一下,放著讓它轉就完成了轉檔(有人說四百多個檔案不容易)。
另外自己做一個偏心的事,就是當wmv轉mp4和ogv時,特別把ogv的參數調好些(因為個人作品優先支援自由軟體),所以用firefox看會比較好些。由於原始是wmv檔,所以轉出來不會比原始檔好(除非拿出原版光碟慢慢轉)。改成hmtl5時網頁可以支援跨台和跨載具。


作品完成如下(限新北市IP連結)
 http://mail.wdps.ntpc.edu.tw/~es/esmovieshow/

  
張貼留言