1. Video @HTML 5 開源的影音格式 WebM

2. 關於我們 Orinx| 螺旋丸 E-Mail: orinx (a-t) orinx.com Gtalk: orinx.chen(a-t) gmail.com Plurk: orinx Website: http://blog.orinx.com Ming Tsay | 小喵 E-Mail: mt@aa.am Gtalk:MingTsay.tw@gmail.com Plurk: 208mt Website: http://mt.aa.am/blog

3. 什麼是 WebM？ WebM 是 Google為了創造一個開放性且免版權費的影音格式而被創造出來，Firefox、 Opera及 IE等瀏覽器 也被 Google邀請加入支援 WebM 格式。

4. 為何選用 WebM？ 開放性的影音格式 免版權使用費 Google 大推!! Android新版本支援 (2.3.3+)

5. 將影片轉成 WebM格式 (on Linux) 安裝 libavcodec-extra-52 執行 ffmpeg-i video.avivideo.webm

6. 將影片轉成 WebM格式 (on Mac) http://mirovideoconverter.com/

7. 將影片轉成 WebM格式 (on Windows) http://webmsoft.com

8. Video 標籤簡介 第一種方法： <video src=“video.webm”> 您的瀏覽器不支援 HTML5 </video> 第二種方法： <video> <source src=“video.webm” type=“vp8, vorbis” /> 您的瀏覽器不支援 HTML 5 </video>

9. Video 標籤簡介 第一種方法： <video src=“video.webm”> 您的瀏覽器不支援 HTML5 </video> 第二種方法： <video> <source src=“video.webm” type=“vp8, vorbis” /> 您的瀏覽器不支援 HTML 5 </video>

10. Video 標籤簡介 第一種方法： <video src=“video.webm”> 您的瀏覽器不支援 HTML5 </video> 第二種方法： <video> <source src=“video.webm” type=“vp8, vorbis” /> 您的瀏覽器不支援 HTML 5 </video>

11. Source 的 type 屬性 WebM:video/webm; codecs="vp8, vorbis" MP4:video/mp4; codecs="avc1.42E01E, mp4a.40.2" Ogg:video/ogg; codecs="theora, vorbis"

12. 若瀏覽器不吃 WebM(好 WebM不吃嗎) 解決方案：多個來源(Source) 程式碼： <video> <source src=“video.webm” /> <source src=“video.mp4” /> <source src=“video.ogg” /> </video>

13. 若瀏覽器不吃 WebM(好 WebM不吃嗎) 解決方案：多個來源(Source) 程式碼： <video> <source src=“video.webm” /> <source src=“video.mp4” /> <source src=“video.ogg” /> </video>

14. 若瀏覽器不吃 WebM(好 WebM不吃嗎) 解決方案：多個來源(Source) 程式碼： <video> <source src=“video.webm” /> <source src=“video.mp4” /> <source src=“video.ogg” /> </video>

15. 若瀏覽器不吃 WebM(好 WebM不吃嗎) 解決方案：多個來源(Source) 程式碼： <video> <source src=“video.webm” /> <source src=“video.mp4” /> <source src=“video.ogg” /> </video>

16. 以 jQuery外掛加上字幕 網路上有人以 jQuery為底，寫出 jQuery.srt.js用來為 Video 加上字幕 http://v2v.cc/~j/jquery.srt/ 範例程式碼： <script src="jquery.js"></script> <script src="jquery.srt.js"></script> <div class="srt“ data-video=“video“ data-srt=“video.srt“ > </div>

17. 以 jQuery外掛加上字幕 網路上有人以 jQuery為底，寫出 jQuery.srt.js用來為 Video 加上字幕 http://v2v.cc/~j/jquery.srt/ 範例程式碼： <script src="jquery.js"></script> <script src="jquery.srt.js"></script> <div class="srt“ data-video=“video“ data-srt=“video.srt“ > </div>

18. 以 jQuery外掛加上字幕 網路上有人以 jQuery為底，寫出 jQuery.srt.js用來為 Video 加上字幕 http://v2v.cc/~j/jquery.srt/ 範例程式碼： <script src="jquery.js"></script> <script src="jquery.srt.js"></script> <div class="srt“ data-video=“video“ data-srt=“video.srt“ > </div>

19. 以 jQuery外掛加上字幕 網路上有人以 jQuery為底，寫出 jQuery.srt.js用來為 Video 加上字幕 http://v2v.cc/~j/jquery.srt/ 範例程式碼： <script src="jquery.js"></script> <script src="jquery.srt.js"></script> <div class="srt“ data-video=“video“ data-srt=“video.srt“ > </div>

20. 以 jQuery外掛加上字幕 網路上有人以 jQuery為底，寫出 jQuery.srt.js用來為 Video 加上字幕 http://v2v.cc/~j/jquery.srt/ 範例程式碼： <script src="jquery.js"></script> <script src="jquery.srt.js"></script> <div class="srt“ data-video=“video“ data-srt=“video.srt“ > </div>

21. jQuery的 SRT 外掛 該外掛運作的方式不符合我們的期望，所以小喵稍微修改了程式碼。

22. jQuery的 SRT 外掛 (Edited by 小喵) http://meow/jquery.srt.mt.js(歡迎下載) 增修功能： 新增 data-nullstr 屬性 (無字幕時所顯示之HTML) 新增 data-loading 屬性 (字幕還在載入階段時顯示的HTML) 新增字幕可用噗浪方式加入連結 ( 連結+空格+(文字)) 修改字幕更新方式 (準確隨 Video 的影片時間更新字幕文字)

23. Never NeverNeverLive Demo 接下來，讓我們現場 Demo 吧！ http://meow/ 歡迎各位用手邊的裝置也來參與 Demo

24. 謝謝大家 ♥