在進(jìn)行項(xiàng)目時(shí),我們會(huì)經(jīng)常使用video標(biāo)簽,對(duì)于剛?cè)肭岸瞬痪偷男“讈?lái)說(shuō)會(huì)遇到各種各樣的問(wèn)題,今天文匯軟件就來(lái)和大家總結(jié)一下。
首先我們先要了解video標(biāo)簽的瀏覽器支持情況:IE 9+、Firefox、Opera、Chrome 和 Safari 都支持
另外還有一點(diǎn) 我們要了解video標(biāo)簽所支持的格式 通常有ogg、mp4、webm。
而且一般video標(biāo)簽在使用時(shí)需要至少需要ogg(兼容火狐瀏覽器)和mp4(兼容Safari 瀏覽器)
另外video標(biāo)簽還有很多自身特有的屬性 如寬度width高度height 控件control還有是否自動(dòng)播放autoplay;另外有些時(shí)候會(huì)出現(xiàn)一些問(wèn)題,例如視頻播放的界面與父級(jí)的寬度有所差異,如下圖所示
這是就需要一個(gè)css屬性 object-fit: fill;就是指定替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。fill就是占滿整個(gè)父級(jí)元素空間的意思;加上這個(gè)屬性后視頻就能像我們想象的那樣在界面中播放了。