最近做项目需要在微信播放视频,设置播放的背景图,折腾了好久
<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; }