打開一個視頻，在點擊播放之前會看到一張封面圖，點擊之后封面消失，隨即播放視頻。
若現(xiàn)有一需求，要你自定義給某個視頻設置封面，應該怎么做呢？
此時可使用H5 video提供的poster屬性即可輕松實現(xiàn)，
poster 屬性規(guī)定視頻下載時顯示的圖像或用戶點擊播放按鈕前顯示的圖像。如未設置該屬性，則使用視頻的第一幀代替
Demo
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>視頻封面</title> </head> <body> <video width="400" height="400" poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574066857005&di=27dc7334bc80c4336d3443e8ecde3160&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F02%2F06%2Fed0c0ddc6271b0717ca64ffdf847eab6.jpg" controls> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/ogg"> </video> </body></html>
補充：有時會出現(xiàn)視頻封面無法鋪滿的情況，需要使用object-fit屬性鋪滿整個屏幕
到此這篇關于H5 video poster屬性設置視頻封面的方法的文章就介紹到這了,更多相關H5設置視頻封面內容請搜索武林網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持武林網！
新聞熱點
疑難解答
