<video> 標(biāo)簽是 HTML 5 的新標(biāo)簽， 標(biāo)簽定義視頻，比如電影片段或其他視頻流。

<video>標(biāo)簽的屬性

HTML5 <video> - 方法、屬性以及事件

注釋?zhuān)?/strong>在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用。
 
最近在一個(gè)項(xiàng)目上遇到了視頻彈窗關(guān)閉后視頻繼續(xù)播放而不是暫?；蛘叱跏蓟阶畛鯛顟B(tài)的問(wèn)題，html中video彈窗結(jié)構(gòu)代碼如下：


 
在點(diǎn)擊觸發(fā)彈窗之后點(diǎn)擊播放能正常播放，在瀏覽器上的表現(xiàn)效果如下：



可以看到播放器上并沒(méi)有重置視頻的按鈕，而且這里需要的是通過(guò)點(diǎn)擊<div class=”video-bg”>的灰色背景層來(lái)實(shí)現(xiàn)關(guān)閉彈窗的，代碼如下：


 
點(diǎn)擊關(guān)閉彈窗的功能實(shí)現(xiàn)了，但是在關(guān)閉彈窗之后就發(fā)現(xiàn)問(wèn)題了：點(diǎn)擊關(guān)閉彈窗之后雖然視頻彈窗關(guān)閉了，但是視頻還在播放，雖然沒(méi)有視頻內(nèi)容，但是還是聽(tīng)的到視頻的聲音，這點(diǎn)在用戶(hù)體驗(yàn)上就很不友好了，要關(guān)閉當(dāng)然就要關(guān)閉得徹徹底底，那么這里需要關(guān)閉彈窗之后就需要讓視頻停止播放，同時(shí)也需要再下次再點(diǎn)開(kāi)的時(shí)候視頻重頭播放吧，如果說(shuō)瀏覽了其他內(nèi)容之后再回到這里點(diǎn)開(kāi)視頻還是在上次播放停止的位置，這樣也不能完全體現(xiàn)視頻的價(jià)值，那么就需要在點(diǎn)擊關(guān)閉彈窗之后讓視頻停止播放而且還要讓視頻初始化到最開(kāi)始的地方，該怎么實(shí)現(xiàn)呢，這里我是這樣做的：


 
通過(guò)獲取box里面的代碼，然后移出本次播放的video視頻代碼模塊，然后通過(guò) append將獲取到的代碼模塊插入到box中，這樣這個(gè)視頻彈窗關(guān)閉的時(shí)候也就達(dá)到了重置的目的。這樣項(xiàng)目的問(wèn)題解決了。

作者：方維網(wǎng)絡(luò)樂(lè)文慶