1 / 20

影音多媒體

08. 影音多媒體. 8-1 HTML 5 的影音功能 8-2 嵌入影片與聲音－ <video> 、 <audio> 元素 8-3 視訊 / 音訊編解碼器 8-4 指定影音檔案的來源－ <source> 元素 8-5 嵌入資源檔案－ <embed> 元素 8-6 嵌入物件－ <object> 元素 8-7 Scripting － <script> 、 < noscript > 元素 8-8 嵌入 CSS 樣式表－ <style> 元素 8-9 網頁自動導向. 8-1 HTML 5 的影音功能

dusty
Download Presentation

影音多媒體

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 08 • 影音多媒體 • 8-1 HTML 5 的影音功能 • 8-2 嵌入影片與聲音－<video>、<audio> 元素 • 8-3 視訊/ 音訊編解碼器 • 8-4 指定影音檔案的來源－<source> 元素 • 8-5 嵌入資源檔案－<embed> 元素 • 8-6 嵌入物件－<object> 元素 • 8-7 Scripting －<script>、<noscript> 元素 • 8-8 嵌入CSS 樣式表－<style> 元素 • 8-9 網頁自動導向

  2. 8-1 HTML 5 的影音功能 • 和HTML 4.01 比起來，HTML 5 最大的突破之一就是新增 <video> 和 <audio> 元素，以及相關的API，進而賦予瀏覽器原生能力來播放影片與聲音。 • 在進一步介紹這兩個元素之前，我們先來看個簡單的例子。 回首頁 • P.8-2~3

  3. 8-2 嵌入影片與聲音－<video>、<audio> 元素 • 8-2-1 src屬性 • src屬性用來指定影片的來源，例如： 回首頁 • P.8-4

  4. 8-2-2 autoplay、loop 屬性 • autoplay屬性可以讓瀏覽器在載入網頁的同時自動播放影片，例如： • 至於加入loop 屬性則是可以讓影片重複播放，例如： • 8-2-3 controls 屬性 • controls 屬性可以在影片上加入瀏覽器內建的控制面板，例如： • P.8-5

  5. 8-2-4 poster 屬性 • poster 屬性用來指定在影片下載完畢之前或開始播放前面，例如： • 8-2-5 width、height 屬性 • width、height 屬性用來指定影片顯示範圍的寬度與高度，例如下面的敘述是將影片顯示範圍的寬度與高度指定為100 像素、300 像素： • 8-2-6 preload 屬性 • preload 屬性用來告訴使用者代理程式，是否要在載入網頁的同時將影片預先下載到緩衝區，方便使用者在想觀看得的時候可以立刻開始播放。 • P.8-6~7

  6. 8-3 視訊/ 音訊編解碼器 • 8-3-1 容器檔案格式 • 常見的容器檔案格式如下： • ™™ AVI (Audio Video Interleave) • ™™ Flash 影片 • ™ .swf (Shockwave Flash) • ™ .fla • ™ .as (ActionScript) • ™ .exe • ™™ MPEG-4 • ™™ Ogg • ™™ WebM 回首頁 • P.8-8~9

  7. 8-3-2 視訊編解碼器 • 視訊編解碼器的種類相當多，常見的如下： • ™™ H.264 • ™™ Theora • ™™ VP8 • P.8-9

  8. 8-3-3 音訊編解碼器 • 音訊編解碼器的種類相當多，常見的如下： • ™™ MP3 (MPEG-1 Audio Layer 3) • ™™ AAC (Advanced Audio Coding) • ™™ Vorbis • P.8-10

  9. 8-4 指定影音檔案的來源－<source> 元素 • 下面是一個例子。 回首頁 • P.8-11~12

  10. 8-5 嵌入資源檔案－<embed> 元素 • 當我們希望瀏覽器播放的資源檔案需要借助於外掛程式時，就可以使用<embed> 元素，例如： 回首頁 • P.8-16

  11. 8-6 嵌入物件－<object> 元素 • 8-6-1 嵌入影片 • 下面是一個例子。 回首頁 • P.8-17~19

  12. 8-6-2 嵌入聲音 • 下面是一個例子。 • P.8-19~20

  13. 8-6-3 嵌入ActiveX Controls • 下面是一個例子。 • P.8-21

  14. P.8-22

  15. 8-6-4 嵌入Java Applets • 下面是一個例子。 • P.8-23~25

  16. 8-7 Scripting －<script>、<noscript> 元素 • 8-7-1 嵌入JavaScript • 下面是一個例子。 回首頁 • P.8-26~27

  17. 8-7-2 嵌入VBScript • 下面是一個例子。 • P.8-28~29

  18. 8-8 嵌入CSS 樣式表－<style> 元素 • 下面是一個例子。 回首頁 • P.8-30~31

  19. 8-9 網頁自動導向 • 下面是一個例子。 回首頁 • P.8-32

More Related