建置HTML5 3D立體影片網站的流程主要分成三個部分:
1.產生網站上的立體影片.(WebM格式)
2.設定你的網站伺服器.
3.撰寫HTML5網頁.
首先從第一個步驟:
1. 產生網站上的立體影片
先去下載最新版的ffmpeg,
http://ffmpeg.zeranoe.com/builds/
然後使用 ffmpeg來做轉檔的動作,命令如下:
ffmpeg.exe -y -i your_input_video -f webm -metadata stereo_mode=left_right -vcodec libvpx -acodec libvorbis -ab 160000 -sameq your_output_filename.webm
其中要注意的是根據原始立體影片的格式來設定 metadata 後面stereo_mode的參數,而立體影片的支援格式如下 (from ffmpeg Documentation):
`mono’
video is not stereo
`left_right’
Both views are arranged side by side, Left-eye view is on the left
`bottom_top’
Both views are arranged in top-bottom orientation, Left-eye view is at bottom
`top_bottom’
Both views are arranged in top-bottom orientation, Left-eye view is on top
`checkerboard_rl’
Each view is arranged in a checkerboard interleaved pattern, Left-eye view being first
`checkerboard_lr’
Each view is arranged in a checkerboard interleaved pattern, Right-eye view being first
`row_interleaved_rl’
Each view is constituted by a row based interleaving, Right-eye view is first row
`row_interleaved_lr’
Each view is constituted by a row based interleaving, Left-eye view is first row
`col_interleaved_rl’
Both views are arranged in a column based interleaving manner, Right-eye view is first column
`col_interleaved_lr’
Both views are arranged in a column based interleaving manner, Left-eye view is first column
`anaglyph_cyan_red’
All frames are in anaglyph format viewable through red-cyan filters
`right_left’
Both views are arranged side by side, Right-eye view is on the left
`anaglyph_green_magenta’
All frames are in anaglyph format viewable through green-magenta filters
`block_lr’
Both eyes laced in one Block, Left-eye view is first
`block_rl’
Both eyes laced in one Block, Right-eye view is first
手邊的影片因為都是以left_right的格式為主,所以metadata的stereo_mode就設成left_right.
而將影片轉成WebM的格式之後,就可以把WebM影片檔案放到WebServer上.
2.WebServer設定
接著是設定WebServer:
通常Apache 或是其他的Web server沒有設定 WebM 的MIME格式,
所以以Apache為例,需要在httpd.conf 加上 AddType video/webm .webm 來設定 MIME type,然後重啟Webserver即可.
3.html5網頁編寫
接著便是編寫一個簡單的網頁將立體影片放進去,如下
<video preload="metadata" controls >
<source src="stereo_movie.webm" type=’video/webm; codecs="vp8, vorbis"’ />
</video>
如此,在Firefox4瀏覽器下,若你的PC有安裝3D Vision最新版驅動程式,便可以在網頁上看到有主動式立體效果的影片了.
附註1: 我們的影片格式是使用left_right,在播放的時候,長寬比例會出現錯誤的情形,目前是透過各家瀏覽器的CSS3支援將影片顯示成正確的比例,如下:
<video preload="metadata" controls style="-moz-transform:scaleX(0.5) translate(-1024)" >
<source src="lo_stereo_En_5min_v6.webm" type=’video/webm; codecs="vp8, vorbis"’ />
</video>
附註2: 目前透過HTML5 支援3D立體影片的瀏覽器只有Firefox 4.0以上, 其他的瀏覽器如Chrome,Opera等還需要等更新才能夠支援.
在ffmpeg的指令中，可以使用 -vb 來控制輸出的bitrate，另外可以用 -threads 來指定要使用多少執行緒來跑。例如: -vb 2M (bitrate設為2Mbits/s) -threads 3 (呼叫3個執行緒來跑)