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