微信小程序video组件使用poster设置封面图没有效果；object-fit类型，网络环境wx.getNetworkType，网络环境改变wx.onNetworkStatusChange

最新推荐文章于 2022-10-14 17:42:58 发布

原创

最新推荐文章于 2022-10-14 17:42:58 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#poster不显示 #poster自定义 #object-fit #getNetworkType #网络切换

本文探讨了微信小程序中video组件设置poster作为封面图可能出现的问题及解决方案，建议使用自定义封面图覆盖原生组件。同时，介绍了object-fit属性的三种类型：fill、contain和cover，并分析了其适用场景。另外，详细讲解了如何利用wx.getNetworkType和wx.onNetworkStatusChange来获取和监听网络状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、poster

1.背景：

在某些情况下poster会发生无效展示状态：
1.1 若 controls 属性值为 false 则设置 poster 无效
1.2 poster取视屏第一帧做背景，如果第一帧为空白，则不展示海报图；
1.3 某些情况下，需要统一视屏的海报图，例如做活动需要展示一个比较好看的海报背景...

此时，如果使用video的poster都不能实现以上需求

2.实现思路：

自己放一张海报图放在原生组件video上，做一个播放按钮，点击播放。video这种原生组件的层级比较高，通过cover-view覆盖即可。

3.代码实现：

3.1wxml

<view class="main rowAndColCenter">
	<view class="mainC">
		<video enable-play-gesture="{
  
  {true}}" bindended="videoEnded" object-fit='cover' class="mainC-img" id="myVideo" src="http://vjs.zencdn.net/v/oceans.mp4" custom-cache='{
  
  {false}}'>
			<cover-view class="mainC-mask" wx:if='{
  
  {play_flag!=0}}'>
				<cover-image class="mainC-bg" src='http://vjs.zencdn.net/v/oceans.png'></cover-image>
				<cover-view class="mainC-wrap">
					<cover-image class="mainC-btn-play" src='../../image/playbg.png' catchtap="