iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
1
自我挑戰組

迷路的前端工程系列 第 5

第五日:多媒體

  • 分享至 

  • xImage
  •  

第四日回顧:
在昨天介紹了清單與表格的使用方法,配合上第三天的標題與文字段落我們可以建立出一個非常基本的網頁了,今天就讓我們來些不是文字的東西吧

在 HTML 中我們現在有"圖片","音樂",和"影像"這三種多媒體可以利用,我們首先就從最常見的圖片開始講解吧

<img src="" alt="" title="" />

上面是一個基本 HTML 圖片加入的方法,其中要注意的地方就是 img 標籤與我們之前學過的標籤不同,它是單獨一個標籤,藉由在最後加入斜線來關閉這個標籤,下來來介紹一下這個 img 用到的參數吧
1.src:這邊填寫的是圖片的路徑~
2.alt:這邊是做個預防,當別人無法讀取你的圖片時可以藉由這個屬性加入你想讓別人看的文字
3.title:在大多瀏覽器當中當你把滑鼠移到圖片上時出現的文字就是這個 title 了

介紹完了圖片,再來就輪到音樂啦

<audio src=""  controls autoplay preload="" loop><audio>

老樣子,介紹參數
1.src:路徑
2.controls:選填,部田就沒有操控按鈕,應該可以算是必填啦
3.autoplay:加入此參數會讓你的音樂自動撥放,也許可以給訪客一個驚喜?
4.preload:有三種方法
A.none:在按下撥放鍵前不做任何動作
B.auto:在頁面載入時同時加載檔案
C.metadata:只先載入檔案大小、長度和撥放清單等資訊
5.loop:在撥放完畢後會自動重複撥放

當我們要加入多個音樂來源時(避免瀏覽器無法讀取其中一種檔案),我們可以使用 source 產生來源

<audio autoplay loop controls>
    <source src="xxxx.ogg">
    <source src="xxxx.mp3">
</audio>

音訊標籤到此告一段落,接下來的視訊也差不多

<video src="" poster="" controls autoplay preload="" loop><video>

視訊比音訊多了一個參數 poster:在內部加入來源,此為用戶在點選撥放前所會看到的畫面
多重來源的建立方法與音訊完全一樣,這邊就不贅述了

今天講些輕鬆的內容,明後天爭取把 HTML 解決掉吧

小抱怨專區:
困...來睡


上一篇
第四日:清單與表格
下一篇
第六日:表單和超連結
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言