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;
}