zoukankan      html  css  js  c++  java
  • H5 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://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属性铺满整个屏幕

  • 相关阅读:
    Linux的学习--系统目录
    PHP内核的学习--创建PHP扩展
    PHP的学习--连接MySQL的三种方式
    MIME Type
    颜色的命名
    JavaScript的学习--生成二维码
    MySQL的学习--触发器
    Google Guava之--cache
    java代码调用oracle存储过程
    oracle序列
  • 原文地址:https://www.cnblogs.com/tu-0718/p/11881947.html
Copyright © 2011-2022 走看看