http://learn.shayhowe.com/html-css/images-audio-video

LESSON 7 Images, Audio, & Video

HTML

  1. Adding Images
  1. img tag element
  2. src attribute
  3. alt attribute alternative text
  4. src 支援圖檔種類:bmp, gif, jpb,png
  1. jpg a quality looking image with high color counts while still being ablue to scale the file size for faster load times 高色度 快
  2. png formatted images are great for image with transparecies or low color counts 低色度 透明
  1. Sizing Images
  1. height
  2. width
  3. 如果只設定一個值,另外一邊會自動校正
  4. 如果只是用參數調整影像呈現的大小會有loading上的議題,特別是 mobile devices
  1. Positioning Images
    img default inline level element
    很多方法 inline, block, flush left, flush right and so on.
    會使用到 float, margin, padding, border, display
  1. inline postioning images:
  1. 通常會讓圖片呈現是 block level 或是 floated flush to one side才是正確的
  2. 讓圖片使用 inline level 呈現在一段文章中,通常是這這圖片含有實質義,或是alt文字裡面有適當地意義才會這樣使用。不然如果圖片只是用來裝飾,我們通常會使用 background image。
  1. block positioning images:
  1. 光是 inline 跟 block 是不夠用的,有時你希望內容可以圍繞在圖片旁邊,這時候就要使用到 float+ left or right
  1. Adding Audio
  1. HTML5之後 IE9+,支援型態也大不相同
    http://www.w3schools.com/tags/tag_audio.asp
    http://www.w3schools.com/html/html5_audio.asp
  2. 預設 audio 不會呈現
  3. autoplay: boolean 會自動播播放
  4. controls: 呈現面板
  5. loop: boolean
  6. preload:
  1. none: 不會 preload
  2. auto: preload all information and data
  3. metadata: preload media information
  4. 這個 attribute 主要用在使用者可能不想聽 audio clip 也可以節省頻寬
  1. Audio Fallbacks
  1. multiple sources by “source” element
    <audio controls>
     <source
     src="jazz.ogg" type="audio/ogg">
     <source
     src="jazz.mp3" type="audio/mpeg">
     <object
     type="application/x-shockwave-flash" data="player.swf?audio=jazz.mp3">
       
    <param name="movie" value="player.swf?audio=jazz.mp3">
       
    <p>This browser does not support the audio format. Please <a href="jazz.mp3" title="Jazz song">download</a> the audio clip.</p>
     
    </object>
    </audio>
  2. 因為有些瀏覽器不支援 HTML5 audio 所以可以使用 Flash Player,常用的選擇有 SWFObject 跟 Flowplayer
  3. 為了支援多種瀏覽器,包括不支援ogg或mp3格式,不支援 Flash plug-in 安裝的瀏覽器,加上一段簡單的下載檔案說明會更好。
  1. Adding Video
  1. HTML5 attribute 跟 Audio 類似
    http://www.w3schools.com/tags/tag_video.asp
  2. http://www.w3schools.com/html/html5_video.asp
  3. Video 如果不指定 controls,除非你指定 autoplay,不然無法播放這個影片。除非你有好的理由,不提供 start, stop, replay 功能
  4. 使用 height 跟 width ,確保影片不會佔掉頁面過大的位置
  5. 更彈性的運用 audio & video
    http://www.netmagazine.com/tutorials/add-html5-video-your-site
  6. Poster Attribute
    在影片呈現前放置一個圖片
    <video src="earth.ogv" controls poster="cows.jpg"></video>
  7. Video Fallbacks
    <video controls>
      <source src="earth.ogv" type="video/ogg">
      <source src="earth.mp4" type="video/mp4">
      <object type="application/x-shockwave-flash" data="player.swf?video=earth.mp4">
        <param name="movie" value="player.swf?video=earth.mp4">
        <p>This browser does not support the video format. Please <a href="earth.mp4" title="Earth video">download</a> the video.</p>
      </object>
    </video>
  1. 可以使用不同的source
  2. 如果不想設計自己的 flash player 可以使用 youtube 跟 vimeo
  1. HTML5 Audio & Video File Formats
    影片轉檔推薦
  1. media.io 線上版
  2. Miro Video 安裝版
  1. Figure & Caption
  1. Figure: block level element,包覆多媒體資訊  IE9+
  2. Figure Caption: figcaption,多媒體的說明  IE9+

img:

Attribute

Value

Description

align

top

bottom

middle

left

right

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of an image according to surrounding elements

alt

text

Specifies an alternate text for an image

border

pixels

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the width of the border around an image

crossoriginNew

anonymous

use-credentials

Allow images from third-party sites that allow cross-origin access to be used with canvas

height

pixels

Specifies the height of an image

hspace

pixels

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the whitespace on left and right side of an image

ismap

ismap

Specifies an image as a server-side image-map

longdesc

URL

Not supported in HTML5. Specifies the URL to a document that contains a long description of an image

src

URL

Specifies the URL of an image

usemap

#mapname

Specifies an image as a client-side image-map

vspace

pixels

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the whitespace on top and bottom of an image

width

pixels

Specifies the width of an image