在开发短视频小程序中,使用Swiper+ Video 的方式实现,目前是保持Swiper中四个swiper-item,在每次滑动时进行替换,默认播放首个视频,滑动暂停上一个,在swiper的chnge绑定的方法中,每次都有判断更新替换视频数据, 在IOS中滑动视频过程中会出现有些视频滑到后不播放,频繁滑动后会出现闪退! IOS机型如下图
监控日志中显示 应该是内存溢出导致的
<view class="wrapper">
<swiper
style="width:{{screenWidth}}px;height:{{screenHeight}}px"
class="video-swiper"
circular="{{circular}}"
easing-function="{{easingFunction}}"
vertical
current="1"
duration="{{duration}}"
bindanimationfinish="animationfinish">
<!-- curQueue 循环会导致video重新插入,objectFit 不可变更 -->
<swiper-item wx:for="{{curQueue}}" wx:key="index">
<view class="shadow"></view>
<video
style="width:{{screenWidth}}px;height:{{screenHeight}}px"
miLinToken="{{miLinToken}}"
id="{{tabType}}video_{{index}}"
class="video_item"
loop="{{loop}}"
enable-play-gesture
enable-progress-gesture
show-center-play-btn="{{false}}"
controls="{{false}}"
src="{{item.video_url}}"
data-id="{{item.id}}"
object-fit="{{item.sp_text ? item.sp_text: 'contain'}}"
data-index="{{index}}"
>
</video>
<view class="video_box_fn">
<view class="vbf_avatar mb32">
<image src="{{item.logo}}" class="avatar" mode="aspectFill" catch:tap="toHome"
data-videodata="{{item}}" />
<image src="../../images/explosive/add@2x.png" wx:if="{{item.is_follow===0}}" class="add_icon"
catch:tap="addFollow" data-type="1" data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />
<image src="../../images/explosive/checkedfollow.png" wx:else class="add_icon" catch:tap="addFollow"
data-type="0" data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />
</view>
<view class="vbf_fn mb32">
<image src="../../images/explosive/like@2x.png" wx:if="{{item.is_zan===0}}" class="fn_icon"
catch:tap="addLike" data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />
<image src="../../images/explosive/checked_like@2x.png" wx:else class="fn_icon" catch:tap="addLike"
data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />
<text class="fn_num">{{toUnit.numToUnit(item.sum_zan)}}</text>
</view>
<view class="vbf_fn" catch:tap="openShare" data-itemindex="{{itemIndex}}" data-videodata="{{item}}">
<image src="../../images/explosive/share@2x.png" class="fn_icon" />
<text class="fn_num">{{toUnit.numToUnit(item.sum_fen)}}</text>
</view>
</view>
<!--视频描述-->
<view wx:if="{{!controls}}">
<view class="video_box_desc">
<!--产品卡片-->
<view class="video_box_product" data-videodata="{{item}}" catch:tap="toDetail">
<image class="vbp_pic" src="/images/explosive/product.png" mode="aspectFill" />
<view class="vbp_desc">
<text class="vbp_desc_name">{{item.tc_name}}</text>
<text class="vbp_desc_price">¥{{(item.discount_price)}}</text>
</view>
</view>
<view class="video_desc">{{item.video_title}}</view>
</view>
<!--店铺地址-->
<view class="shop_address" catch:tap="toShopHome" data-videodata="{{item}}">
<image src="/images/explosive/shop@2x.png" class="shop_icon" />
<text class="shop_name">{{item.shop_name}}({{item.distance}})</text>
</view>
</view>
<view class="bottom_shadow"></view>
</swiper-item>
</swiper>
<!-- 暂停按钮 -->
<view wx:if="{{isShowPauseBtn}}" class="push_btn" catch:tap="handlePlay" data-itemindex="{{itemIndex}}"
data-videodata="{{item}}">
<image src="/images/explosive/pause.png" class="pause_icon"/>
</view>
<view wx:if="{{isShowLikeIcon}}" class="like-icon"
style="position:absolute; left:{{row-200}}px; top:{{top-200}}px;width:800rpx;height:800rpx;">
<canvas id="like_lottie" type="2d" style="width: 100%;height: 100%;"/>
<!-- <image src="/images/bg/love.png" animation='{{animationMiddleHeaderItem}}' style="width: 100%;height: 100%;" />-->
</view>
</view>
<wxs module="toUnit">
var numToUnit = function (num) {
var w = num;
if (num >= 10000) {
w = num / 10000;
w = w.toFixed(1);
w = w + 'w';
}
return w;
}
module.exports = {
numToUnit: numToUnit
}
</wxs>
解决了没有
用了插件市场的一个视频插件替换了原生video
现在不知道这个插件还在不在
有解决方案吗,类似的问题同问
解决了吗,同样问题困扰