Video @HTML 5<br />開源的影音格式 WebM<br />
關於我們<br />Orinx| 螺旋丸<br />E-Mail: orinx (a-t) orinx.com<br />Gtalk: orinx.chen(a-t) gmail.com<br />Plurk: orinx<br />Websi...
什麼是 WebM?<br />WebM 是 Google為了創造一個開放性且免版權費的影音格式而被創造出來,Firefox、 Opera及 IE等瀏覽器<br />也被 Google邀請加入支援 WebM 格式。<br />
為何選用 WebM?<br />開放性的影音格式<br />免版權使用費<br />Google 大推!!<br />Android新版本支援 (2.3.3+)<br />
將影片轉成 WebM格式 (on Linux)<br />安裝 libavcodec-extra-52<br />執行 ffmpeg-i video.avivideo.webm<br />
將影片轉成 WebM格式 (on Mac)<br />http://mirovideoconverter.com/<br />
將影片轉成 WebM格式 (on Windows)<br />http://webmsoft.com<br />
Video 標籤簡介<br />第一種方法:<br /><video src=“video.webm”><br />您的瀏覽器不支援 HTML5<br /></video><br />第二種方法:<br /><video><br /><sour...
Video 標籤簡介<br />第一種方法:<br /><video src=“video.webm”><br />您的瀏覽器不支援 HTML5<br /></video><br />第二種方法:<br /><video><br /><sour...
Video 標籤簡介<br />第一種方法:<br /><video src=“video.webm”><br />您的瀏覽器不支援 HTML5<br /></video><br />第二種方法:<br /><video><br /><sour...
Source 的 type 屬性<br />WebM:video/webm; codecs="vp8, vorbis"<br />MP4:video/mp4; codecs="avc1.42E01E, mp4a.40.2"<br />Ogg:v...
若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br />	<source src=“v...
若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br />	<source src=“v...
若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br /><source src=“vi...
若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br />	<source src=“v...
以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><scr...
以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><scr...
以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><scr...
以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><scr...
以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><scr...
jQuery的 SRT 外掛<br />該外掛運作的方式不符合我們的期望,所以小喵稍微修改了程式碼。<br />
jQuery的 SRT 外掛 (Edited by 小喵)<br />http://meow/jquery.srt.mt.js(歡迎下載)<br />增修功能:<br />新增 data-nullstr 屬性 (無字幕時所顯示之HTML)<br...
Never NeverNeverLive Demo<br />接下來,讓我們現場 Demo 吧!<br />http://meow/<br />歡迎各位用手邊的裝置也來參與 Demo<br />
謝謝大家 ♥<br />
Upcoming SlideShare
Loading in …5
×

Video @ html 5

1,583 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,583
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Video @ html 5

  1. 1. Video @HTML 5<br />開源的影音格式 WebM<br />
  2. 2. 關於我們<br />Orinx| 螺旋丸<br />E-Mail: orinx (a-t) orinx.com<br />Gtalk: orinx.chen(a-t) gmail.com<br />Plurk: orinx<br />Website: http://blog.orinx.com<br />Ming Tsay | 小喵<br />E-Mail: mt@aa.am<br />Gtalk:MingTsay.tw@gmail.com<br />Plurk: 208mt<br />Website: http://mt.aa.am/blog<br />
  3. 3. 什麼是 WebM?<br />WebM 是 Google為了創造一個開放性且免版權費的影音格式而被創造出來,Firefox、 Opera及 IE等瀏覽器<br />也被 Google邀請加入支援 WebM 格式。<br />
  4. 4. 為何選用 WebM?<br />開放性的影音格式<br />免版權使用費<br />Google 大推!!<br />Android新版本支援 (2.3.3+)<br />
  5. 5. 將影片轉成 WebM格式 (on Linux)<br />安裝 libavcodec-extra-52<br />執行 ffmpeg-i video.avivideo.webm<br />
  6. 6. 將影片轉成 WebM格式 (on Mac)<br />http://mirovideoconverter.com/<br />
  7. 7. 將影片轉成 WebM格式 (on Windows)<br />http://webmsoft.com<br />
  8. 8. Video 標籤簡介<br />第一種方法:<br /><video src=“video.webm”><br />您的瀏覽器不支援 HTML5<br /></video><br />第二種方法:<br /><video><br /><source src=“video.webm” type=“vp8, vorbis” /><br />您的瀏覽器不支援 HTML 5<br /></video><br />
  9. 9. Video 標籤簡介<br />第一種方法:<br /><video src=“video.webm”><br />您的瀏覽器不支援 HTML5<br /></video><br />第二種方法:<br /><video><br /><source src=“video.webm” type=“vp8, vorbis” /><br />您的瀏覽器不支援 HTML 5<br /></video><br />
  10. 10. Video 標籤簡介<br />第一種方法:<br /><video src=“video.webm”><br />您的瀏覽器不支援 HTML5<br /></video><br />第二種方法:<br /><video><br /><source src=“video.webm” type=“vp8, vorbis” /><br />您的瀏覽器不支援 HTML 5<br /></video><br />
  11. 11. Source 的 type 屬性<br />WebM:video/webm; codecs="vp8, vorbis"<br />MP4:video/mp4; codecs="avc1.42E01E, mp4a.40.2"<br />Ogg:video/ogg; codecs="theora, vorbis"<br />
  12. 12. 若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br /> <source src=“video.mp4” /><br /> <source src=“video.ogg” /><br /></video><br />
  13. 13. 若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br /> <source src=“video.mp4” /><br /> <source src=“video.ogg” /><br /></video><br />
  14. 14. 若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br /><source src=“video.mp4” /><br /> <source src=“video.ogg” /><br /></video><br />
  15. 15. 若瀏覽器不吃 WebM(好 WebM不吃嗎)<br />解決方案:多個來源(Source)<br />程式碼:<br /><video><br /><source src=“video.webm” /><br /> <source src=“video.mp4” /><br /><source src=“video.ogg” /><br /></video><br />
  16. 16. 以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><script src="jquery.js"></script><br /><script src="jquery.srt.js"></script><br /><div class="srt“<br />data-video=“video“<br />data-srt=“video.srt“ ><br /></div><br />
  17. 17. 以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><script src="jquery.js"></script><br /><script src="jquery.srt.js"></script><br /><div class="srt“<br />data-video=“video“<br />data-srt=“video.srt“ ><br /></div><br />
  18. 18. 以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><script src="jquery.js"></script><br /><script src="jquery.srt.js"></script><br /><div class="srt“<br />data-video=“video“<br />data-srt=“video.srt“ ><br /></div><br />
  19. 19. 以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><script src="jquery.js"></script><br /><script src="jquery.srt.js"></script><br /><div class="srt“<br />data-video=“video“<br />data-srt=“video.srt“ ><br /></div><br />
  20. 20. 以 jQuery外掛加上字幕<br />網路上有人以 jQuery為底,寫出 jQuery.srt.js用來為 Video 加上字幕<br />http://v2v.cc/~j/jquery.srt/<br />範例程式碼:<br /><script src="jquery.js"></script><br /><script src="jquery.srt.js"></script><br /><div class="srt“<br />data-video=“video“<br />data-srt=“video.srt“ ><br /></div><br />
  21. 21. jQuery的 SRT 外掛<br />該外掛運作的方式不符合我們的期望,所以小喵稍微修改了程式碼。<br />
  22. 22. jQuery的 SRT 外掛 (Edited by 小喵)<br />http://meow/jquery.srt.mt.js(歡迎下載)<br />增修功能:<br />新增 data-nullstr 屬性 (無字幕時所顯示之HTML)<br />新增 data-loading 屬性 (字幕還在載入階段時顯示的HTML)<br />新增字幕可用噗浪方式加入連結 ( 連結+空格+(文字))<br />修改字幕更新方式 (準確隨 Video 的影片時間更新字幕文字)<br />
  23. 23. Never NeverNeverLive Demo<br />接下來,讓我們現場 Demo 吧!<br />http://meow/<br />歡迎各位用手邊的裝置也來參與 Demo<br />
  24. 24. 謝謝大家 ♥<br />

×