打開一個視頻，在點擊播放之前會看到一張封面圖，點擊之后封面消失，隨即播放視頻。
若現有一需求，要你自定義給某個視頻設置封面，應該怎么做呢？
此時可使用H5 video提供的poster屬性即可輕松實現，
poster 屬性規定視頻下載時顯示的圖像或用戶點擊播放按鈕前顯示的圖像。如未設置該屬性，則使用視頻的第一幀代替
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>
補充：有時會出現視頻封面無法鋪滿的情況，需要使用object-fit屬性鋪滿整個屏幕
到此這篇關于H5 video poster屬性設置視頻封面的方法的文章就介紹到這了,更多相關H5設置視頻封面內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
