在链接私服中显示视频缩略图上的播放按钮

Question

我正在开发一个视频共享平台，该平台自动为上传的视频生成缩略图，我使用这些缩略图在其他站点上进行链接预览，但我想在og:图像上添加一个播放按钮，类似于dailyMotion链路预扰下面的图像。

有谁知道我怎样才能做到这一点吗谢谢

Answer 1

这是一个非常基本的示例，用于建模一个视频容器内的视频，其中包含一个.视频缩略图元素和一个..play按钮元素。您所要做的就是为play按钮选择一个背景图像，只要在图片中处理透明度，该按钮就会以透明的背景呈现。否则，您应该选择矢量图形解决方案，比如我在这里找到的https://css-tricks.com/making-pure-css-playpause-button/和https://codepen.io/chrisdwheatley/pen/WNZjjJ。

这是我的尝试：

 <style>
        .video-container{
          position: relative;
          /*faking its size because I don't have a real video*/
          width: 320px;
          height: 180px;
          background: blue;
        }
    
        .play-button {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: transparent;
          /*here you can choose your picture for the play button*/
          background-image: url('http://...');
        }
    </style>
    
    <div class="video-container">
        <img class="video-thumbnail" />
        <div class="play-button"></div>
    </div>