html video poster属性图片铺满video标签

poster属性图片铺满videovideo{width: 100%;object-fit:fill;}html5的video的背景图片poster铺满全屏大小方法 html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太

zzzzzz.

4421人浏览 · 2020-10-14 18:53:46

zzzzzz. · 2020-10-14 18:53:46 发布

poster属性图片铺满video

video{
width: 100%;
object-fit:fill;
}

html5的video的背景图片poster铺满全屏大小方法 html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太好…… 封面的尺寸被强制缩小了，需要填充整个播放器的。


< !DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"/> 
        <title></title> 
        <style type="text/css"> 
        .video-container1{ 
            width: 400px; 
            height: 400px; 
            border: solid; 
        } 
        .video1{ 
            width: 100%; 
            height: 100%; 
        } 
        </style> 
    </head> 
    <body> 
    <div class="video-container1"> 
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls> 
 
        </video> 
    </div> 
    </body>