小編給大家分享一下HTML5中video poster屬性怎么設(shè)置視頻封面,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:主機(jī)域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、寧陵網(wǎng)站維護(hù)、網(wǎng)站推廣。打開一個視頻,在點擊播放之前會看到一張封面圖,點擊之后封面消失,隨即播放視頻。
若現(xiàn)有一需求,要你自定義給某個視頻設(shè)置封面,應(yīng)該怎么做呢?
此時可使用H5 video提供的poster屬性即可輕松實現(xiàn),
poster 屬性規(guī)定視頻下載時顯示的圖像或用戶點擊播放按鈕前顯示的圖像。如未設(shè)置該屬性,則使用視頻的第一幀代替
Demo
視頻封面
補(bǔ)充:有時會出現(xiàn)視頻封面無法鋪滿的情況,需要使用object-fit屬性鋪滿整個屏幕
以上是“HTML5中video poster屬性怎么設(shè)置視頻封面”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!