HTML5學習筆記之音視頻標簽

其他HTML5相關文章

HTML5學習筆記之HTML5基本介紹

HTML5學習筆記之基礎標簽

HTML5學習筆記之表格標簽

HTML5學習筆記之表單標簽

HTML5學習筆記之音視頻標簽

一. video標簽

1. 作用: 播放視頻

2. video標簽格式1:

<video src="">
</video>

3. video標簽的屬性

• src: 告訴video標簽需要播放的視頻地址
• autoplay: 告訴video標簽是否需要自動播放視頻
• controls:告訴video標簽是否需要顯示控制條
• poster: 告訴video標簽視頻沒有播放之前顯示的占位圖片
• loop: 告訴video標簽循環播放視頻. 一般用于做廣告視頻
• preload: 告訴video標簽預加載視頻, 但是需要注意preload和autoplay相沖, 如果設置了autoplay屬性, 那么preload屬性就會失效
• muted:告訴video標簽視頻靜音
• width/height: 和img標簽中的一模一樣

4. video標簽格式2

<video>
  <source src="" type=""></source>
  <source src="" type=""></source>
</video>

• 第二種格式存在的意義

  • 由于視頻數據非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導致了沒有一種視頻格式是所有瀏覽器都支持的這個時候W3C為了解決這個問題, 所以推出了第二個video標簽的格式
  • video標簽的第二種格式存在的意義就是為了解決瀏覽器適配問題. video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標簽指定給video標簽, 那么以后當瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放

• 注意點:

  • 當前通過video標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標簽播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標簽, 否則同樣無法播放
  • 在過去的一些瀏覽器是不支持HTML5標簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標簽來播放視頻, 那么我們以后可以通過一個JS的框架叫做html5media來實現

代碼示例

<video width="200" height="100" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls">
    <!--楚喬傳,好像是第4集-->
    <source src="https://v.qq.com/x/cover/dhzimk1qzznf301/t0024jjys1q.html?ptag=baidu.aladdin.tv" >
    <source src="http://www.youname.com/images/first.ogg" />
</video>

二.audio標簽

1. 作用: 播放音頻

2. 格式:

<audio src="">
</audio>

<audio>
<source src="" type="">
</audio>

3. 注意點:

• audio標簽的使用和video標簽的使用基本一樣
• video中能夠使用的屬性在audio標簽中大部分都能夠使用, 并且功能都一樣
• 只不過有3個屬性不能用,height/width/poster

三.詳情和概要標簽

1. 作用:

• 利用summary標簽來描述概要信息, 利用details標簽來描述詳情信息
• 默認情況下是折疊展示, 想看見詳情必須點擊

2. 格式:

<details>
    <summary>概要信息</summary>
    詳情信息
</details>

3. 示例代碼

<!--詳情和概要標簽-->
<details>
    <summary>概要信息</summary>
    這里是詳情: 是假的呢舉案說法南石道街開發病那都是獨守空房技能速度加快非農數據的看法山東礦機第三方看似簡單婦女節看電視呢房間看電視開始的減肥納斯達克今年初vdsfw的看法今年圣誕節開放男
</details>

Snip20170615_9.png

四. marquee標簽

1. 作用: 跑馬燈效果

2. 格式:

<marquee>內容</marquee>

3. 屬性:

• direction: 設置滾動方向 left/right/up/down
• scrollamount: 設置滾動速度, 值越大就越快
• loop: 設置滾動次數, 默認是-1, 也就是無限滾動
• behavior: 設置滾動類型 slide滾動到邊界就停止, alternate滾動到邊界就彈回

4. 注意點:

• marquee標簽不是W3C推薦的標簽, 在W3C官方文檔中也無法查詢這個標簽, 但是各大瀏覽器對這個標簽的支持非常好

5. 示例代碼

<!--跑馬燈-marquee標簽-->
<marquee direction="left" scrollamount="5">跑馬燈</marquee>
<marquee direction="right" scrollamount="3">marquee</marquee>
<marquee direction="up" scrollamount="1">標簽</marquee>
<marquee direction="down" scrollamount="1">down</marquee>

Snip20170615_10.png

注: 實際的效果中,這三個是一直在滾動的,只是圖片看不到效果,自己親自實踐感受下吧!

五. HTML中被廢棄的標簽

由于HTML現在只負責語義而不負責樣式.但是HTML一開始有一部分標簽連樣式也包攬了, 所以這部分標簽都被廢棄了

b、u、i、s 
- 以上標簽自己帶有樣式, 有濃厚的樣式作用, 今后一般都只作為CSS鉤子使用
- 原則: 不到萬不得已,切記不要使用如上標簽. 大家可以到BAT的網站查看源代碼, 幾乎看不到以上標簽

• b(Bold)作用: 將文本字體加粗
  • 格式:<b>將文本字體加粗</b>
• u(Underlined)作用: 為文本添加下劃線
  • 格式: <u>為文本添加下劃線</u>
• i(Italic)作用: 顯示斜體文本效果
  • 格式: <i>顯示斜體文本效果</i>
• s(Strikethrough)作用: 為文本添加刪除線
  • 格式: <s>為文本添加刪除線</s>

為了彌補 b、u、i、s標簽的不足, W3C又推出了一組新的標簽, 這些標簽在顯示上看似和buis沒什么區別, 但是在語義上卻有重大區別

• strong作用: 著重內容
  • 格式:<strong>著重內容</strong>
• ins(Inserted)作用: 新插入的文本
  • 格式:<ins>新插入的文本</ins>
• em(Emphasized)作用:強調內容
  • 格式:<em>強調內容</em>
• del(Deleted)作用: 已刪除的文本
  • 格式:<del>已刪除的文本</del>

示例代碼

<!--新增標簽-->
<strong>著重內容</strong>
<ins>新插入的內容</ins>
<em>強調的內容</em>
<del>已經刪除的內容</del>

Snip20170615_11.png

• 對HTML5語言有興趣的同學,給大家極力推薦:江哥的視頻HTML5 + 跨平臺開發,只是不知道會不會繼續更新