小程序：一拖三視頻組件&setData使用技巧
視頻預(yù)加載
視頻實(shí)例復(fù)用
視頻預(yù)加載
autoplay自動(dòng)播放觸發(fā)加載
bindplay在播放開始后暫停播放
前體：預(yù)加載的視頻既要顯示，又要不顯示。
如果video標(biāo)簽渲染時(shí)是隱藏的，則不會(huì)觸發(fā)自動(dòng)播放
隱藏的幾個(gè)例子：
- 'display'為'none';
- 'width'或'height'為0;
- 'wx:if="{{false}}"'
- 視頻預(yù)加載
所以需要在屏幕之外顯示視頻元素：
<view
class="videos"
style="transform:translateY({{videoScrollY}}px)"
>
<video
wx.for="{{videos}}"
wx.key="{{item.rowKey}}"
bindPlay="bindPlay"
autoPlay
>
</video>
</view>
視頻實(shí)例復(fù)用
關(guān)鍵點(diǎn)：
視頻列表索引
當(dāng)前播放視頻
預(yù)加載視頻
包含3個(gè)video的視頻列表當(dāng)前播放的視頻索引 index = activeIndex % 3
預(yù)加載索引 preIndex = (activeIndex + 1) % 3
let preIndex = Math.min(list.length - 1, Math.max(0, (activeIndex + direction)));
this.setData({
['videos[${preIndex % 3}]']: list[preIndex],
videoScrollY: -windowHeight * (activeIndex % 3),
});
