使用swiper和video实现短视频循环播放
1、从后台获取数据库配置的短视频url
2、使用video组件播放视频,期望是播放完毕后自动重头开始循环播放。
实际测试发现,在微信小程序开发者工具上会自动播放且播放完毕后,也会自动重头开始重新播放。
但是在华为p30、iphone7上通过预览测试开发版本,发现第一遍自动播放完毕后,短视频不会自动进入重头开始播放,需要手动点击视频出现播放按钮后,再点击 播放按钮才会自动播放
<swiper bindanimationfinish="swiperChange" bindtap="tabVideo" circular="{{circular}}" current="{{current}}" duration="300" skipHiddenItemLayout="{{true}}" vertical="{{true}}">
<block>
<block wx:if="{{videoObjList[0].video_id}}">
<swiper-item itemId="{{videoObjList[0].index}}">
<video wx:if="{{shopInfo.is_live==1}}" bindplay="eventPlay" bindtimeupdate="videoUpdate" controls="{{false}}" loop="{{true}}" customCache="{{false}}" enableProgressGesture="{{false}}" id="video0" loop="{{true}}" objectFit="{{shopInfo.is_full==1?'cover':'contain'}}" showCenterPlayBtn="{{false}}" showFullscreenBtn="{{false}}" showPlayBtn="{{false}}" showProgress="{{false}}" src="{{videoObjList[0].url}}" vslideGestureInFullscreen="{{false}}"></video>
<image wx:else class="backgroupimg" src="../../static/images/wxshop0.png"></image>
</swiper-item>
</block>
</block>
<block>
<block wx:if="{{videoObjList[1].video_id}}">
<swiper-item itemId="{{videoObjList[1].index}}">
<video wx:if="{{shopInfo.is_live==1}}" bindplay="eventPlay" bindtimeupdate="videoUpdate" controls="{{false}}" loop="{{true}}" customCache="{{false}}" enableProgressGesture="{{false}}" id="video1" loop="{{true}}" objectFit="{{shopInfo.is_full==1?'cover':'contain'}}" showCenterPlayBtn="{{false}}" showFullscreenBtn="{{false}}" showPlayBtn="{{false}}" showProgress="{{false}}" src="{{videoObjList[1].url}}" vslideGestureInFullscreen="{{false}}"></video>
<image wx:else class="backgroupimg" src="../../static/images/wxshop1.png"></image>
</swiper-item>
</block>
</block>
<block>
<block wx:if="{{videoObjList[2].video_id}}">
<swiper-item itemId="{{videoObjList[2].index}}">
<video wx:if="{{shopInfo.is_live==1}}" bindplay="eventPlay" bindtimeupdate="videoUpdate" controls="{{false}}" loop="{{true}}" customCache="{{false}}" enableProgressGesture="{{false}}" id="video2" loop="{{true}}" objectFit="{{shopInfo.is_full==1?'cover':'contain'}}" showCenterPlayBtn="{{false}}" showFullscreenBtn="{{false}}" showPlayBtn="{{false}}" showProgress="{{false}}" src="{{videoObjList[2].url}}" vslideGestureInFullscreen="{{false}}"></video>
<image wx:else class="backgroupimg" src="../../static/images/wxshop2.png"></image>
</swiper-item>
</block>
</block>
</swiper>
测试发现在iphone7上可以播放完毕自动重播,正常。
在安装华为P30上播放完毕后就停止了,需要手动点击播放才可以重新播放