增加影音與圖片 多媒體設計
<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+
<Video> 標籤事件屬性 Try it 屬性 值 描述 autoplay 視頻就緒後馬上播放 controls 等待用戶觸發播放事件 height pixels 設定視頻高度 width 設定視頻寬度 loop 當完成播放後再次開始播放 src url 要播放的URL preload 視頻在頁面加載時進行加載,並預備播放
<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+
<audio> 標籤事件屬性 屬性 值 描述 autoplay 音頻就緒後馬上播放 controls 等待用戶觸發播放事件 loop 當完成播放後再次開始播放 src url 要播放的URL preload 音頻在頁面加載時進行加載,並預備播放 Try it
練習3 新增一個網頁,嵌入一則影片,並設定為使用者 自訂撥放、完成播放後進行重播、高度與寬度設 定為400x800 提示 : <Video>
練習4 新增一個網頁,嵌入一首音樂,並設定為網頁開 啟後自動撥放、完成播放後進行重播 提示 : <audio>
搭配javascript後臺效果 <drag><drop>拖放 <Canvas> 畫布 拖放是一種常見的類型,即抓取對象以後多到另一個位 置 <Canvas> 畫布 擁有多種繪製路徑、矩形、圖形、加入圖像等方法 <Geolocation>地理定位 可獲取用戶的地理位置,需先取得用戶同意 <Web Storge> web 儲存 Local Storage : 長時間保存,不會自動刪除 Session Storage : 瀏覽器視窗關閉或切換分頁即失效