video @ html 5
DESCRIPTION
TRANSCRIPT
Video @ HTML 5開源的影音格式 WebM
關於我們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
什麼是 WebM ？
WebM 是 Google 為了創造一個開放性
且免版權費的影音格式而被創造出來，
Firefox 、 Opera 及 IE 等瀏覽器
也被 Google 邀請加入支援 WebM 格式。
為何選用 WebM ？
•開放性的影音格式
•免版權使用費
•Google 大推 !!
•Android 新版本支援 (2.3.3+)
將影片轉成 WebM 格式 (on Linux)
•安裝 libavcodec-extra-52
•執行 ffmpeg -i video.avi
video.webm
將影片轉成 WebM 格式 (on Mac)
http://mirovideoconverter.com/
Video 標籤簡介
• 第一種方法：<video src=“video.webm”>
您的瀏覽器不支援 HTML5</video>
• 第二種方法：<video>
<source src=“video.webm” type=“vp8, vorbis” />您的瀏覽器不支援 HTML 5
</video>
Video 標籤簡介
• 第一種方法：<video src=“video.webm”>
您的瀏覽器不支援 HTML5</video>
• 第二種方法：<video>
<source src=“video.webm” type=“vp8, vorbis” />您的瀏覽器不支援 HTML 5
</video>
Video 標籤簡介
• 第一種方法：<video src=“video.webm”>
您的瀏覽器不支援 HTML5</video>
• 第二種方法：<video>
<source src=“video.webm” type=“vp8, vorbis” />您的瀏覽器不支援 HTML 5
</video>
Source 的 type 屬性
• WebM: video/webm; codecs="vp8, vorbis"
• MP4: video/mp4; codecs="avc1.42E01E,
mp4a.40.2"
• Ogg: video/ogg; codecs="theora, vorbis"
若瀏覽器不吃 WebM ( 好 WebM 不吃嗎 )
• 解決方案：多個來源 (Source)
• 程式碼：<video>
<source src=“video.webm” /><source src=“video.mp4” /><source src=“video.ogg” />
</video>
若瀏覽器不吃 WebM ( 好 WebM 不吃嗎 )
• 解決方案：多個來源 (Source)
• 程式碼：<video>
<source src=“video.webm” /><source src=“video.mp4” /><source src=“video.ogg” />
</video>
若瀏覽器不吃 WebM ( 好 WebM 不吃嗎 )
• 解決方案：多個來源 (Source)
• 程式碼：<video>
<source src=“video.webm” /><source src=“video.mp4” /><source src=“video.ogg” />
</video>
若瀏覽器不吃 WebM ( 好 WebM 不吃嗎 )
• 解決方案：多個來源 (Source)
• 程式碼：<video>
<source src=“video.webm” /><source src=“video.mp4” /><source src=“video.ogg” />
</video>
以 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>
以 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>
以 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>
以 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>
以 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>
jQuery 的 SRT 外掛
該外掛運作的方式不符合我們的期望，
所以小喵稍微修改了程式碼。
jQuery 的 SRT 外掛 (Edited by 小喵 )
• http://meow/jquery.srt.mt.js ( 歡迎下載 )
• 增修功能：• 新增 data-nullstr 屬性 ( 無字幕時所顯示之 HTML)
• 新增 data-loading 屬性 ( 字幕還在載入階段時顯示的 HTML)
• 新增字幕可用噗浪方式加入連結 ( 連結 + 空格 +( 文字 ) )
• 修改字幕更新方式 ( 準確隨 Video 的影片時間更新字幕文字 )
Never Never Never Live Demo
• 接下來，讓我們現場 Demo 吧！
http://meow/
• 歡迎各位用手邊的裝置也來參與 Demo
謝謝大家 ♥