#问题解决方案#同一页面存在多个video时,video无法正常播放一直在加载转圈

官方回答:

不建议同个页面使用多个video组件,建议不超过3个video,如果要实现video列表功能,请进行优化(image列表,选中时将image替换成video)

如何进行优化

image列表,选中时将image替换成video

来到我们的vide组件
在这里插入图片描述
然后在小程序开发文档里面,找到组件/媒体组件/video
=>
在这里插入图片描述
给我们的视频添加一个封面,目的是为了,让我们视频展示的时候,显示的最初的画面是封面,而不是我们视频的第一帧
=》
添加poster属性

<video 
      class="common" 
      src="{{item.data.urlInfo.url}}"
      bindplay="handlePlay"
      id="{{item.data.vid}}"
      poster="{{item.data.coverUrl}}"
      ></video>

=》性能优化,使用image图片代替video标签去显示在我们的页面上

=》在video下面添加一个image标签

这个image图片显示的内容,
一上来要确保和我们之前的video标签之前显示的内容,保持一致

<image src="{{item.data.coverUrl}}" />

=》设置imge的样式和video的样式一样

=>检查页面,此时图片和视频是共存的,所以,我们需要设置,只显示其中一个

分析:
一上来的时候,我们首先是显示我们图片,等到用户去点击我们的这个图片,代表用户想播放这个视频,我们才切换到视频这个标签
=》
#1.首先,我们需要知道用户什么时候,点击图片,点击之后,我们才将图片切换到视频
#2.等到我们切换到下一个视频的时候,上一个视频就不播放了,所以又会从视频切换到图片

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值