video 標簽
什么是 video 標簽
作用:播放視頻
格式:
<video src="">
</video>
video 標簽的屬性
- src:用于告訴 video 標簽需要播放的視頻地址
- autoplay: 用于告訴 video 標簽是否需要自動播放視頻
- controls: 用于告訴 video 標簽是否需要顯示控制條
- poster: 用于告訴 video 標簽視頻沒有播放之前顯示的占位圖片
- loop: 一般用于做廣告視頻,用于告訴 video 標簽視頻播放完畢之后是否需要循環(huán)播放
- preload:預(yù)加載視頻,但是需要注意 preload 和 autoplay 相沖梭冠,如果設(shè)置了 autoplay 屬性悬钳,那么 preload 屬性就會失效
- muted:靜音
- width/height:和 img 標簽中的一模一樣
<video src="images/sb1.webm" controls="controls" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>
video 的第二種格式
格式
<video autoplay="autoplay" controls="controls">
<source src="" type="">(</source>
source 是單標簽沒有后面這個)
</video>
- 第二種格式存在的意義:由于視頻數(shù)據(jù)非常非常的重要碉渡,所以五大瀏覽器廠商都不愿意支持別人的視頻格式,所以導致了沒有一種視頻格式是所有瀏覽器都支持的侈贷,這個時候 W3C 為了解決這個問題宙彪,所以推出了第二個 video 標簽的格式
- video 標簽的第二種格式存在的意義就是為了解決瀏覽器是陪問題,video 元素支持三種視頻格式,我們可以把三種格式都通過 source 標簽指定給 video 標簽桐早,那么以后當瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放
注意點
- 當前通過 video 標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式陶衅,但是向讓所有瀏覽器都通過 video 標簽播放視頻還有一個前提條件膨俐,就是瀏覽器必須支持 HTML5 標簽,否則同樣無法播放
- 在過去的一些瀏覽器是不支持 HTML5 標簽的罩句,所以為了讓過去的一些瀏覽器也能夠通過 video 標簽來播放視頻吟策,那么我們以后可以通過一個 JS 的框架 叫做 html5media 來實現(xiàn)
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm">
<source src="images/sb1.mp4" type="video/mp4">
<source src="images/sb1.ogg" type="video/ogg">
</video>
audio 標簽
作用:播放音頻
格式:
<audio src="">
</audio>
<audio>
<source src="" type="">
</audio>
注意點:
audio 標簽的使用和 video 標簽的使用基本一樣,video 中能夠使用的屬性在 audio 標簽中大部分都能夠使用的止,并且功能一樣,只不過有3個屬性不能呢用着撩,height/width/poster
<audio autoplay="autoplay" controls="controls">
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
詳情和概要標簽
作用:利用 summary 標簽來描述概要信息诅福,利用 details 標簽來描述詳細信息
默認情況下是折疊展示,向看見詳情必須點擊
格式
<details>
<summary>概要信息</summary>
詳細信息
</details>
marquee 標簽
marquee 標簽的作用是跑馬燈
格式:
<marquee>內(nèi)容</marquee>
屬性
direction:設(shè)置滾動方向 left/right/up/down
<marquee>隨便寫點什么</marquee>
<marquee direction="right">隨便寫點什么</marquee>
<marquee direction="up">隨便寫點什么</marquee>
<marquee direction="down">隨便寫點什么</marquee>
scrollamount:設(shè)置滾動速度拖叙,值越大就越快
<marquee scrollamount="1">隨便寫點什么</marquee>
<marquee scrollamount="100">隨便寫點什么</marquee>
loop:設(shè)置滾動次數(shù)氓润,默認是-1,也就是無限滾動
<marquee loop="1">隨便寫點什么</marquee>
behavior: 設(shè)置滾動類型,alide 滾動到邊界就停止薯鳍,alternate 滾動到邊界就彈回
<marquee behavior="slide">隨便寫點什么</marquee>
<marquee behavior="alternate">隨便寫點什么</marquee>
圖片滾動
<marquee>
<i*mg src="images/nj.jpg">(加* 簡書自動改格式)
</marquee>
注意點
marquee 標簽不是 w3c 推薦的標簽咖气,在 w3c 官方文檔中也無法查詢這個標簽,但是各大瀏覽器對這個標簽的支持非常好