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

最新推荐文章于 2024-03-12 19:16:55 发布

zzzzzz.

最新推荐文章于 2024-03-12 19:16:55 发布

阅读量4k

点赞数

原文链接：https://wenku.baidu.com/view/f3e1ef83b8d528ea81c758f5f61fb7360b4c2be0.html

版权

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>

zzzzzz.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
html video poster属性图片铺满video标签

poster属性图片铺满videovideo{width: 100%;object-fit:fill;}html5的video的背景图片poster铺满全屏大小方法 html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太好…… 封面的尺寸被强制缩小了，需要填充整个播放器的。< !DOCTYPE html>
复制链接

扫一扫