HTML5增加了audio(音頻)和video(視頻)兩個(gè)標(biāo)簽,不用再像以前那樣使用插件去播放音頻和視頻audio和video支持的屬性和方法基本上一樣
首先先來(lái)看一下audio標(biāo)簽格式
第一種格式
第一種
autoplay是自動(dòng)播放的障簿,controls是顯示默認(rèn)播放器界面豆村,默認(rèn)是看不見(jiàn)的
第二種格式
第二種
source是導(dǎo)入標(biāo)簽鲁驶,可以支持多種格式,MP3、ogg蛉加、MP4等等瀏覽器支持哪個(gè)就播放哪個(gè)
然后打開(kāi)瀏覽器就會(huì)顯示這樣的界面
自動(dòng)播放:演員
簡(jiǎn)單的音頻播放器就這樣。
然后是audio
audio有很多屬性先看一下audio的標(biāo)簽格式
里面的width和height只能在標(biāo)簽里設(shè)置缸逃,不能在style里去設(shè)置针饥,css只能設(shè)置它的外邊框等,不能更改播放器的大小需频。poster="source/1.jpg"這個(gè)是播放器剛進(jìn)來(lái)時(shí)的背景圖片
video的標(biāo)簽
加poster
運(yùn)行的時(shí)候丁眼,如果是Hbuilder的用戶要去本地去運(yùn)行(就是打開(kāi)文件夾所在位置,在雙擊這個(gè)文件)昭殉,這是Hbuilder的服務(wù)問(wèn)題苞七。
第一個(gè)效果,啥也沒(méi)有
第二個(gè)效果挪丢,剛進(jìn)來(lái)是一張圖片
說(shuō)說(shuō)audio的屬性
1蹂风、通過(guò)src屬性可以設(shè)置視頻播放源
src
點(diǎn)擊btn1按鈕切換視頻源
2、autoplay? 加載完畢是否立即播放
3乾蓬、返回當(dāng)前的url? 和當(dāng)前音頻的長(zhǎng)度
5惠啄、currentTime 設(shè)置或返回視頻和音頻中的當(dāng)前播放位置(以秒計(jì)) video.currentTime = 30;30s處
6、volume? 設(shè)置或返回音頻和視頻當(dāng)前音量 0 ~1? ? video.volume = 0;? 靜音
7、muted? 設(shè)置或返回音頻和視頻是否靜音 video.muted = true;? 靜音 兩個(gè)都可以設(shè)置靜音礁阁,不盡相同
8巧号、playbackRate? 設(shè)置或返回當(dāng)前播放音頻和視頻的播放速度? video.playbackRate = 4;
9、ended 返回視頻和音頻是否播放完畢? console.log(video.ended); true? 或者? false.
10姥闭、loop 設(shè)置或返回視頻和音頻是否在播放結(jié)束后循環(huán)播放?? video.loop = true ;和第一個(gè)autoplay? 的功能相似丹鸿,但不盡相同。
11棚品、pause(只讀) 返回音頻和視頻是否暫停? console.log(video.pause);? true或者false
就先寫(xiě)這些基本的功能靠欢,給大家分享兩張張圖片。
這里邊load? play? pause? 很重要? 常用
瀏覽器不支持video的情況