video封面圖處理

時間 2019-11-13

標籤 video 封面處理简体版

原文原文鏈接

<video id="video_player" style="background-color:#f4f4f4" class="video_detial" src="" poster="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="  style="width:100%;" controls preload></video>

設置poster爲透明圖，而後用背景圖代替poster，可鋪滿真個視頻窗口html

background-size: 100%; // 圖片100%按縮放比例滿這個窗口，可能會變型ide

background-size: cover； // 圖片不變型，多餘的會被裁剪post