Download presentation
Presentation is loading. Please wait.
1
增加影音與圖片 多媒體設計
2
<video> web 視頻 支援video三種視頻格式 Ogg = Theora視頻編碼與Vorbis音頻編碼
MPEG4 = H.264視頻編碼與ACC音頻編碼 WebM=VP8視頻編碼與Vorbis音頻編碼 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ MPEG4 9.0+ 3.0+ WebM 4.0+ 10.6+ 6.0+
3
<Video> 標籤事件屬性 Try it 屬性 值 描述 autoplay 視頻就緒後馬上播放 controls
等待用戶觸發播放事件 height pixels 設定視頻高度 width 設定視頻寬度 loop 當完成播放後再次開始播放 src url 要播放的URL preload 視頻在頁面加載時進行加載，並預備播放
4
<audio> 音頻 至今網頁上並未存在播放音頻的標準，過去大多 通過Flash來播放。
HTML5制定一種通過audio元素來包含音頻的標 準方法，可支援的格式如下表 : 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ MP3 9.0+ 3.0+ Wav 4.0+ 10.6+
5
<audio> 標籤事件屬性 屬性 值 描述 autoplay 音頻就緒後馬上播放 controls 等待用戶觸發播放事件
loop 當完成播放後再次開始播放 src url 要播放的URL preload 音頻在頁面加載時進行加載，並預備播放 Try it
6
練習3 新增一個網頁，嵌入一則影片，並設定為使用者 自訂撥放、完成播放後進行重播、高度與寬度設 定為400x800
提示 : <Video>
7
練習4 新增一個網頁，嵌入一首音樂，並設定為網頁開 啟後自動撥放、完成播放後進行重播 提示 : <audio>
8
搭配javascript後臺效果 <drag><drop>拖放 <Canvas> 畫布
拖放是一種常見的類型，即抓取對象以後多到另一個位 置 <Canvas> 畫布 擁有多種繪製路徑、矩形、圖形、加入圖像等方法 <Geolocation>地理定位 可獲取用戶的地理位置，需先取得用戶同意 <Web Storge> web 儲存 Local Storage : 長時間保存，不會自動刪除 Session Storage : 瀏覽器視窗關閉或切換分頁即失效
Similar presentations
