【原創】HTML&CSS學習筆記（10） ----網頁多媒體 img video audio等等

一 網頁多媒體基本知識

• 網頁多媒體：img video audio
• 圖像，視訊，音頻，完全是三種tag寫法

 1.1圖檔 img

• img是自閉合元素，沒有結束标記的，隻有開始标記 <img>
• img是inline element
• img為了獨立使用，經常和<p>嵌套使用

例子1

<img src=""  alt="">

例子2 img嵌套在p裡

<p>

<img>

</p>

1.2視訊video

• 有開始結束标簽<video>  </video>
• src屬性 有可能寫在開始标簽裡
• src也可以單獨寫在video内部，作為屬性進行定義
• src也可以獨立出去，進行嵌套  <video>  <source src=""> </video>

例子1，video的屬性

<video controls autoplay src=”.mp4” id=”video1” >

</video>

例子2   video嵌套屬性

<video>

<source src=”.mp4”>

<source src=”.webm”>

<source src=”.ogv”>

</video>

1.3 音頻 audio

• 有開始标簽和結束标簽 <audio> </audio>
• src屬性，寫在開始标簽裡

<audio src=”.wav” loop controls>

</audio>

二 圖檔詳細知識 img  image

2.1 圖檔格式比較

圖檔格式	色彩	壓縮損失	透明度	圖檔大小	使用
Jpg/jpeg	色彩1600萬	有損格式，縮小會丢失資訊	不支援透明度	相同品質下，檔案較小	最适合連續色調圖像如照片 有大量灰色連續陰影？
Png	色彩分3種格式 Png-8 Png-24 Png-32	無損格式	支援透明度 可以用透明顯示圖像下面的内容	Png本身比jpg大，壓縮後小	據說是一種專門的網際網路圖檔格式 适合單色頭像和線條構圖如logo等 需要透明背景的時候的照片
Gif	顔色最多256	無損壓縮	可透明度 隻允許單色透明度	也是最适合單色頭像和顔色 Gif更大	也是适合單色logo等，支援動态

語句文法

<img src=”” alt=””  width=”400” height=”800”>

 src引用的位址

     如果是網際網路資源，位址應該是絕對位址url

     而如果是本網站資源，應該是相對位址，否則不好維護

設定圖檔大小的幾點意義

•  可以改變原圖檔大小
•  如果先告訴了圖檔大小，則HTML會事先建立圖檔布局，否則HTML是先建立布局，再讀入圖檔，然後再調整布局
•  但是要明白，width 和 height 并不是圖檔的大小，而是html為img預留的空間大小，也就是圖檔在html裡顯示這麼大
•   圖檔還是被下載下傳了完整的大小，然後按這個預留白間顯示？ 不是剪裁嗎？
•   是以最好自己去改圖檔大小用PS等
•  現在看起來網頁圖檔的聰明處理辦法，就是存2份圖檔

1. 1個檔案夾，縮略圖，原圖PS縮小直接放新的小圖到網頁上。/而不是放原圖 加大小限制
2. 1個檔案夾，全圖，在<a>裡實作網頁調整到專門的大圖網頁上

而這樣一般的做法是

<a href=””>

<img src=””>

</a>

偷懶也可以這麼做

<a href=”.jpg”>

但是這樣既提前顯示不了縮略，跳轉後也奇怪，而且無法跳回來？隻能後退？試試

三 video詳細知識

video屬性

controls     //顯示控制台

autoplay    //自動播放

width="" height=""

src=""      //資源

poster="image"    //視訊開頭海報圖檔,不自動播放時預設可能是黑屏，自動播放就沒必要設定這個

loop      //循環

preload ="none"     // 或 "metadata" 或"auto"

codecs="theora"      //編解碼器

type="video/webm";

id=""

三種視訊解碼格式

mp4 容器   //codec h2.64 // .mp4格式 // mpeg-la公司，safari ie9+

webm 容器   // codec編解碼器  vp8   //.webm格式   google公司，chrome firefox  opera支援

ogg容器     //開源，codec編解碼器theora，// .ogv格式  chrome firefox  opera支援

flash video 

越往下優先級越低

<video>

     <source src=".mp4">

     <source src=".webm">

     <source src=".ogv">

     <object >  ....</object>    //引用flash視訊

</video>

四  audio知識