<video> 標(biāo)簽是 HTML 5 的新標(biāo)簽,標(biāo)簽定義視頻,比如電影片段或其他視頻流。<video>標(biāo)簽的屬性屬性值描述
autoplay autoplay 如果出現(xiàn)該屬性,則視頻在就緒后馬上播放。 controls controls 如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。 height pixels 設(shè)置視頻播放器的高度。 loop loop 如果出現(xiàn)該屬性,則當(dāng)媒介文件完成播放后再次開始播放。 preload preload 如果出現(xiàn)該屬性,則視頻在頁面加載時(shí)進(jìn)行加載,并預(yù)備播放。
如果使用 "autoplay",則忽略該屬性。 src url 要播放的視頻的 URL。 width pixels 設(shè)置視頻播放器的寬度。
HTML5 <video> - 方法、屬性以及事件下面列出了大多數(shù)瀏覽器支持的視頻方法、屬性和事件:方法屬性事件
play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width注釋:
在所有屬性中,只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后,其他屬性才可用。
最近在一個(gè)項(xiàng)目上遇到了視頻彈窗關(guān)閉后視頻繼續(xù)播放而不是暫停或者初始化到最初狀態(tài)的問題,html中video彈窗結(jié)構(gòu)代碼如下:
在點(diǎn)擊觸發(fā)彈窗之后點(diǎn)擊播放能正常播放,在瀏覽器上的表現(xiàn)效果如下:
可以看到播放器上并沒有重置視頻的按鈕,而且這里需要的是通過點(diǎn)擊<div class=”video-bg”>的灰色背景層來實(shí)現(xiàn)關(guān)閉彈窗的,代碼如下:
點(diǎn)擊關(guān)閉彈窗的功能實(shí)現(xiàn)了,但是在關(guān)閉彈窗之后就發(fā)現(xiàn)問題了:點(diǎn)擊關(guān)閉彈窗之后雖然視頻彈窗關(guān)閉了,但是視頻還在播放,雖然沒有視頻內(nèi)容,但是還是聽的到視頻的聲音,這點(diǎn)在用戶體驗(yàn)上就很不友好了,要關(guān)閉當(dāng)然就要關(guān)閉得徹徹底底,那么這里需要關(guān)閉彈窗之后就需要讓視頻停止播放,同時(shí)也需要再下次再點(diǎn)開的時(shí)候視頻重頭播放吧,如果說瀏覽了其他內(nèi)容之后再回到這里點(diǎn)開視頻還是在上次播放停止的位置,這樣也不能完全體現(xiàn)視頻的價(jià)值,那么就需要在點(diǎn)擊關(guān)閉彈窗之后讓視頻停止播放而且還要讓視頻初始化到最開始的地方,該怎么實(shí)現(xiàn)呢,這里我是這樣做的:
通過獲取box里面的代碼,然后移出本次播放的video視頻代碼模塊,然后通過 append將獲取到的代碼模塊插入到box中,這樣這個(gè)視頻彈窗關(guān)閉的時(shí)候也就達(dá)到了重置的目的。這樣項(xiàng)目的問題解決了。
網(wǎng)站欄目:關(guān)于video視頻彈窗關(guān)閉之后的重置
URL分享:http://www.rwnh.cn/news5/239055.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、微信公眾號(hào)、移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、企業(yè)建站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)