網站規劃與設計上課補充教材

第八堂課： 影音多媒體嵌入網站的應用

某些時刻，某些網站的設計，總是要有點花俏的方式來吸引用戶的點擊。此時，影音多媒體的使用就很重要啦！在 html5 之前，有很重要的 flash 影片可以使用， 那片如何可以將 flash 直接放到網站上面，並且加入自己的網頁說明，而不是整份網站都是 flash 而已？如何用新的 html5 的標籤來加入影音資料？ 哪些東西是所謂的影音資料？這些都需要來理解理解才好！
本章重點目標：
  1. 跑馬燈： <marquee > 的製作：
    • align="top, middle, bottom"：垂直對齊方式
    • behavior="scroll, alternate, slide"：同一方向移動, 兩邊碰來碰去, 滑動到邊界停止
    • bgcolor="背景色"
    • direction="left, right"：向左還是向右跑？
    • loop="N, -1, infinite"：有限次數或無限(-1)次數
    • scrolldelay="單位為千分之一秒"：多久移動一次該文字；
    • scrollamount="單次移動的距離"
    • height="高度"
    • width="寬度"
    • 實做：在你的首頁上，使用一個跑馬燈來介紹你自己吧！此外，也可以嘗試，圖片能不能跑跑跑？

  2. 關於 flash 的總總：
    • 雖然要講 flash，不過，由於 Apple 建議不要使用 flash 在他的裝置上，html5 上面的 java script 也支援相當多的動畫影音， 同時由於 flash 播放器比較消耗系統資源，平板與行動裝置也比較少上頭的播放器。因此，flash 的應用頻率就降低了。 不過，flash 由於還是具有動畫製作的簡易優勢，因此目前還是得要稍微注意一下他的使用情況較佳。
    • Flash 的檔案格式元檔為 .fla ，但是在網頁上面顯示時，只能是影片格式 .swf 或視訊格式 .flv 檔名，兩者的播放器使用情況不同， 因此得先要確定你的格式為何才好。一般來說，單純的手工製作影片，應該是 .swf 格式才對。如果是電影視訊錄影的，才使用 .flv 的格式吧。
    • 使用 java script 配合 google 播放器嵌入 .swf 到網頁中：
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
      <script type="text/javascript">swfobject.embedSWF("dir/file.swf","name","Xpx","Ypx","8.0.0");</script>
      <div id="name"><p>寫上不支援 flash 時要出現的字串</p></div>
    • 實做：請將 這個檔案 下載到你的系統中，並且予以啟動在你的網站畫面中

  3. 視訊的格式非常的多，不過一般來說，mp4 應該都是有支援的格式。嵌入到網頁中，可以使用 html5 提供的 <video> 標籤喔！這個標籤的屬性有：
    • src="filename"：指定檔案路徑與檔名
    • poster="photo.jpg"：視訊可以順利播放前要預先顯示的圖片
    • preload="{none|auto|metadata}"：使用者按下按鈕前，應該要做的動作。個人建議使用 metadata 即可
    • width, height="數值不須單位"：顯示的大小，單位為 px，不需要加上單位
    • controls：直接使用不須加上內容，可以顯示控制 bar
    • autoplay：是否要自動開始播放，一般不建議
    • loop：是否要重複播放，一般不建議
    • 建議：可以透過 format factory 先將格式轉為 MP4(視訊) 或 ogg(音訊) 後，再繼續處理， 你就可以直接使用串流了！相當棒的一項工作！只是不能播放 rmvb 比較可惜些！
    • 在崑山校內可以直接下載這個中文免安裝版本試看看。
    • 實做：請將 這個檔案 下載後放置到你的網站，然後設定適當的項目，嘗試播放看看。

  4. 音訊的格式也非常的多，只是目前 html5 建議使用 ogg 的格式就是了！而 html5 建議使用得標簽為 audio 喔！相關屬性有：
    • src="filename"：指定檔案路徑；
    • preload="{none|auto|metadata}"：使用者按下按鈕前，應該要做的動作。個人建議使用 metadata 即可
    • controls：直接使用不須加上內容，可以顯示控制 bar
    • autoplay：是否要自動開始播放，一般不建議
    • loop：是否要重複播放，一般不建議
    • 實做：將 這個檔案 下載並且處理成 .ogg 格式後，上傳到你的網站，並且嵌入到網頁內容中。
本章練習與習題：
  1. 將小陳老師或大陳老師的作業，一些簡易的影片檔案，轉檔為 .mp4 或音效轉檔為 .ogg 並且注意檔案容量大小後，嵌入到你的個人網站中！
  2. 將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！