使用H5中的video标签时,页面中间显示“暂停”图标;点击播放,图标消失;点击暂停,图标出现(play、pause、ended)
生活随笔
收集整理的這篇文章主要介紹了
使用H5中的video标签时,页面中间显示“暂停”图标;点击播放,图标消失;点击暂停,图标出现(play、pause、ended)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
有時(shí)候我們在做項(xiàng)目的過程中會遇到這樣的需求:
使用H5中的video標(biāo)簽播放一個(gè)視頻,并在視頻的中心位置放置一個(gè)暫停的圖標(biāo),點(diǎn)擊后視頻播放,圖標(biāo)消失;再次點(diǎn)擊后,視頻暫停,圖標(biāo)出現(xiàn)。
想要的效果,例下:
- 我們可以配合使用video標(biāo)簽的pause、play、ended方法進(jìn)行實(shí)現(xiàn):
①因?yàn)槭且粋€(gè)vue項(xiàng)目,先定義一個(gè)變量,暫且叫它videoIsPlay,默認(rèn)為false,即視頻暫停時(shí)狀態(tài);
data () {return {videoIsPlay: false,} },②配置video標(biāo)簽;
<videoref="videoRef" // 用來獲取video所在的DOM元素:src="視頻地址"controls // 規(guī)定瀏覽器應(yīng)該為視頻提供播放控件,比如:暫停、播放、聲音、字幕等@play="videoIsPlay = true;" // play() 方法開始播放當(dāng)前視頻,改變videoIsPlay的值,使圖標(biāo)隱藏@pause="videoIsPlay = false;" // pause() 方法暫停播放當(dāng)前視頻,改變videoIsPlay的值,使圖標(biāo)顯示@ended="videoIsPlay = false;"> // 視頻播放完畢,改變videoIsPlay的值,使圖標(biāo)顯示 </video>③ 生成視頻中心位置的暫停圖標(biāo),可以找UI切圖,或自己用CSS寫一個(gè)樣式出來,此處選擇第二種方式,同時(shí)給該圖標(biāo)一個(gè)點(diǎn)擊事件;
- 示例代碼如下(HTML):
- 示例代碼如下(CSS):
- 示例代碼如下(JS):
總結(jié)
以上是生活随笔為你收集整理的使用H5中的video标签时,页面中间显示“暂停”图标;点击播放,图标消失;点击暂停,图标出现(play、pause、ended)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GitHub、Google等镜像加速地址
- 下一篇: js 月份间隔计算器_Moment.js