在video標(biāo)簽中,我們可以使用屬性:videoWidth & videoHeight,它獲取的是video的寬度和高度(媒體本身)。 雖然不能直接使用,但是可以通過(guò)計(jì)算寬高比得到 video 占用的寬度和高度。 比如讓 video 占滿(mǎn)寬度為480px的容器,可以根據(jù)寬高比得到此時(shí)video占用的高度。 重要: 一般做法:
video標(biāo)簽屬性 src="文件路徑地址" width="寬" height="高" controls="控制條" autoplay="自動(dòng)播放" loop="循環(huán)" preload="預(yù)加載" <video width="320" height="240" controls="controls">
<!-- 同一視頻的兼容性寫(xiě)法 --> <source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4"> <!-- 同一視頻的兼容性寫(xiě)法 --> Your browser does not support the video tag. </video> video標(biāo)簽點(diǎn)擊暫停事件,起初測(cè)試階段未發(fā)現(xiàn)該兼容BUG,后來(lái)android上點(diǎn)擊可以暫停,ios上點(diǎn)擊無(wú)效果,一般bug都是反過(guò)來(lái)的,可能video標(biāo)簽有它自己的想法吧! debug階段: 1.懷疑定位層級(jí)問(wèn)題導(dǎo)致底部video沒(méi)有觸發(fā),依次增加層級(jí)直到最高z-index元素video-play被覆蓋,點(diǎn)擊事件依然無(wú)法執(zhí)行 2.懷疑js未能獲取DOM,js監(jiān)聽(tīng)dom操作無(wú)alert彈出,改為后臺(tái)交互數(shù)據(jù)加載完成后再次監(jiān)聽(tīng)點(diǎn)擊事件,依然無(wú)效果,再改為dom增加點(diǎn)擊事件依然無(wú)效果。 3.解決方案-后來(lái)反思:用戶(hù)首次點(diǎn)擊video-play元素可以操縱video播放,所以增加第三方元素覆蓋video標(biāo)簽范圍區(qū)域,監(jiān)聽(tīng)此標(biāo)簽用戶(hù)操作事件控制video播放/暫停
|