iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Modern Web

從0開始系列 第 6

從0開始爬HTML - 音訊、物件、浮動框架、自動導向

  • 分享至 

  • xImage
  •  

昨天是影片,今天從音訊開頭!

音訊

<audio>
用法和<video>相似,屬性也是。
HTML5支援的格式有MP3(.mp3、.m3u)、AAC(.aac、.mp4、.m4a)、Ogg Voribs(.ogg),一樣Chrome、Opera、Firefox、Edge還有Safari都有支援。
https://ithelp.ithome.com.tw/upload/images/20220921/20151919V4WGS7cJFE.png

物件

HTML5不支援,就拉HTML4.01來支援!
<object>
當然也不是全部的格式都可以,但是多了HTML4.01支援的圖片、影片還有音訊的格式
同時HTML4.01的格式也不太樣,有幾個也挺眼熟
<data>相當於HTML5<src>
<width><height>跟HTML5是一樣的作用
<name>幫嵌入物件設定名字
<type>這個比較重要,他是設定物件內容類型
<typemustmatch>設定只有<type>屬性與物件內容類型符合才能使用<data>的物件

嵌入影片

https://ithelp.ithome.com.tw/upload/images/20220921/20151919KzrCgASP9T.png

假如是不支持的影片格式的話,會像這樣自動下載
https://ithelp.ithome.com.tw/upload/images/20220921/20151919vDvDV343k6.png

嵌入音訊

https://ithelp.ithome.com.tw/upload/images/20220921/20151919oJAIreZEtY.png

嵌入浮動框架

<iframe>是可以連結外部的特殊鏈結,像是youtube和google map
常見的屬性中有些就不多說了,<src><name><width><height>
<src>是放資源網址,<srcdoc>是放文件內容
<frameborder>設定是否顯示框架的框線,[1,0]=[是,否]
<sandbox>套用浮動框架的安全規則
<allowfullscreen>允許以全螢幕顯示內容
https://ithelp.ithome.com.tw/upload/images/20220921/20151919tuLOxjKufE.png
https://ithelp.ithome.com.tw/upload/images/20220921/20151919KRH9gEuBlM.png

嵌入Youtube影片

https://ithelp.ithome.com.tw/upload/images/20220921/20151919qYN8Cm7lrV.png
但是通常youtube不會想要別人直接用他的網址
所以需要選
https://ithelp.ithome.com.tw/upload/images/20220921/20151919gEdBjwaGER.png
才會
https://ithelp.ithome.com.tw/upload/images/20220921/20151919FjfnQmsKKC.png

嵌入Google地圖

https://ithelp.ithome.com.tw/upload/images/20220921/20151919dAw24Wyf7C.png
https://ithelp.ithome.com.tw/upload/images/20220921/20151919tOyOvXIT21.png

自動導向

格式是這樣的<meta http-equiv="refresh" content="秒數; url=欲連結網址">
https://ithelp.ithome.com.tw/upload/images/20220921/20151919MiCwbJXA40.png
跳轉後
https://ithelp.ithome.com.tw/upload/images/20220921/20151919rY6TTCnH7K.png


今天的內容比較少,但比較需要熟練
/images/emoticon/emoticon06.gif


上一篇
從0開始爬HTML - 圖片、表格、影片
下一篇
從0開始爬HTML - 表單1.0
系列文
從0開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言