打開一個視頻，在點擊播放之前會看到一張封面圖，點擊之后封面消失，隨即播放視頻。
若現(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設置視頻封面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
