建構跨平台(iPad / PC)影音教學網

關於影音教學網，我們之前都是使用Powercam進行錄製，使用上十分方便，但有一些問題：

1. 直接錄製完產生的檔案，只能在IE瀏覽器觀看。可以轉成Flash進行跨平台，但是也無法在iPad上使用。
2. 檔案有時會出現毀損狀況，看一半會當機或無法順利開啓。

前陣子看了重灌狂人介紹的Screencast-O-Matic 螢幕錄影工具，可將影片做成 GIF 動畫！，這個工具有幾個好處：

1. 可以任意決定螢幕錄製的尺寸
2. 有多種輸出格式可以選擇

為了完整體驗Screencast-O-Matic的功能，所以決定付費成為Pro會員，US$12/year，台幣三百多。

成為付費會員後，主要的差別是：

1. 錄影長度無限制
2. 錄影畫面不會出現Screen-O-Matic的字樣
3. 可以錄製Step-By-Step影片，可以輸入一段文字，錄下語音，然後再錄製操作步驟，適合用於教別人系統設定操作或是障礙排除的步驟
4. 成為付費會員後，可以下載螢幕錄製程式，會在開機時啓動，隨時可進行錄影

使用Screen-O-Matic對我來說最大的好處，是能夠控制錄製螢幕大小以及輸出成MP4格式。但是實際在使用時，常常發生編碼錯誤的狀況。

已經回報給Screen-O-Matic，目前的解決方案是，輸出到Google Docs，再從Google Docs下載，即為MP4格式。

原廠已回覆！原來是儲存路徑的問題，如發生無法存檔時，可能是儲存路徑中有中文，導致錯誤，請換一個地方進行儲存。

其實Screen-O-Matic也提供了錄影檔上傳的平台，但是這個平台播放時會使用到Java，在一般桌面端觀看皆可，但是iPad沒有支援Java，無法觀看。



http://www.screencast-o-matic.com/channels/clVw1KVHI

為了能在iPad上也可以觀看，所以決定轉換成MP4格式之後，再放到網站上。但是錄下來的錄影檔一個一個的，並沒有組織架構，我們利用Moodle架設數位學習網之後，再加入Yui Menu來製作架構：

有了架構之後，再利用HTML5的語法，來加入MP4檔案：

<video src="movie.mp4"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

用iPad可以正常觀看了，但是使用桌面端的Firefox卻看不到畫面。

原因出在於目前HTML5在各家瀏覽器支援的影片格式：

 所以只好再將MPEG4的影片轉檔成WebM格式，使用的工具是 Miro Video Converter，使用上非常方便，只要將檔案拖曳進去，然後選擇輸出的格式就可以了！

 然後再修改HTML5的語法

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser does not support the video tag.
</video> 

終於製作出 iPad / Firefox / Chrome / Safari 都可以順利觀看的影音教學網

http://mobiledev.tw/course/view.php?id=17