1.視頻標(biāo)簽- video
當(dāng)前 <video> 元素支持三種視頻格式： 盡量使用 mp4格式
使用語法
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
支持格式
video支持格式
由于各個瀏覽器的支持情況不同，所以會有一種兼容性的寫法，這種寫法了解一下即可,播放規(guī)則:第一個不行就播放第二個,可以準(zhǔn)備幾個不同格式webm mp4 ogg的視頻文件做一個小兼容
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的瀏覽器暫不支持 <video> 標(biāo)簽播放視頻
</ video >
常用屬性
video常用屬性
屬性很多，有一些屬性需要重點掌握：
- src 必寫屬性： 視頻的資源路徑
- controls="controls" ,controls 展示播放控件,播放暫停聲音,進(jìn)度條等等不常用,因為在不同瀏覽器會有不同的ui展示效果 后續(xù)會通過視頻標(biāo)簽的一些api自己實現(xiàn)視頻播放控件的效果。目的保證不同瀏覽器展示相同的效果
- loop="loop",loop 視頻播放完畢之后會停留在最后一幀(最后一個畫面) 循環(huán)播放
- autoplay 一進(jìn)入頁面就自動播放.chrome66版本之后禁止視頻和音頻的自動播放,firefox火狐瀏覽器也禁用.
添加一個muted靜音屬性即可實現(xiàn)自動播放 - muted 靜音
- 如果在訪問頁面的過程當(dāng)中想要實現(xiàn)提前加載視頻
preload="auto" 和 autoplay 自動播放的視頻無需添加preload="auto"不預(yù)先加載視頻 preload="none" - poster 視頻封面,poster="圖片的路徑"
2.音頻標(biāo)簽- audio
當(dāng)前 <audio> 元素支持三種視頻格式： 盡量使用 mp3格式
使用語法
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
支持格式
audio支持格式
常用屬性
audio常用屬性
小結(jié)
- 音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致
- 瀏覽器支持情況不同
- 谷歌瀏覽器把音頻和視頻自動播放禁止了
- 我們可以給視頻標(biāo)簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
- 視頻標(biāo)簽是重點，我們經(jīng)常設(shè)置自動播放，不使用 controls 控件，循環(huán)和設(shè)置大小屬性
