溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML5中video poster屬性怎么設置視頻封面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
打開一個視頻，在點擊播放之前會看到一張封面圖，點擊之后封面消失，隨即播放視頻。
若現有一需求，要你自定義給某個視頻設置封面，應該怎么做呢？
此時可使用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://cache.yisu.com/upload/information/20210312/296/130444.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屬性鋪滿整個屏幕
以上是“HTML5中video poster屬性怎么設置視頻封面”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
