H5页面设置背景图，微信可浏览背景图

最近做项目需要在微信播放视频，设置播放的背景图，折腾了好久

 <div class="video-back" :style="{backgroundImage: 'url(' + info.thumbnail_url + ')', }">
      <video :src="info.video_url" class="container" controls  :poster="info.thumbnail_url"  style="object-fit:cover"></video>
    </div>

1、poster：

poster字段在大部分的浏览器可以作用，但在微信端打开是无效的，同时，全屏展示需要加上属性：style="object-fit:cover"

2、通过div设置背景图

图片要作为css背景添加到一个div之类的框架里
然后，把视频video标签放在这个div里，再调整样式，就可以了。上面的代码用了vue框架设置的动态背景图。

需要设置一下相应的样式：

.video-back{
  background-image: url('http://www.x-pediatrician.com/va/static/img/video/banner.png') ;
  background-size:100% 98%;
  background-repeat:no-repeat;
}