视频设置封面

2018-02-03  本文已影响3096人  舒小妮儿

小程序设置视频封面有两种方案,效果是一样的
1、video组件设置poster,但前提是:video的controls 属性值为 true

<video id="video" src="{{resumeInfo.video_url}}" objectFit='contain' controls bindplay='playVideo' bindended='endVideo' show-center-play-btn="{{false}}" custom-cache="{{false}}" poster="{{coverImgPath}}">

2、cover-image设置图片。因为video 是原生组件,层级最高,想要放图片在视频上做封面显示时,需要用cover-view才能覆盖在原生组件之上。

<video id="video" src="{{resumeInfo.video_url}}" objectFit='contain' controls bindplay='playVideo' bindended='endVideo' show-center-play-btn="{{false}}" custom-cache="{{false}}">
   <!-- 视频封面 -->
   <cover-view class="controls" hidden="{{!showCoverImg}}">
      <cover-image class="imgcover" src="{{coverImgPath}}" mode="aspectFill">
      </cover-image>
   </cover-view>  
</video>

关于方案1中设置custom-cache="{{false}}"属性,是因为在详情页面出现视频播放进度条在走,但画面却不动的现象。网上有开发者也遇到了同样的问题,【已解决】video组件在ios上播放会画面卡住不动给出了解决方案,我尝试后是有效的,至于原理不太明白。猜想估计是小程序对视频加载播放有一套缓存机制,并且默认那是可以自定义缓存策略的。至于猜想是否正确,目前我无法验证,如果有了解的朋友,看完可以给我留言指导,谢谢~

上一篇下一篇

猜你喜欢

热点阅读