wxml页面:
<scroll-view class="videoScroll"scroll-y>
<view class="videoItem" wx:for="{
{videoList}}" wx:key="id">
<!-- 光靠video组件模式是无法实现暂停上一个,播放下一个的操作功能 -->
<video
src="{
{item.data.urlInfo.url}}"
object-fit="fill"
id="{
{item.data.vid}}"
poster="{
{item.data.coverUrl}}"
wx:if="{
{videoId === item.data.vid}}"
bindtimeupdate="bindTimeUpdate"
/>
<image
src="{
{item.data.coverUrl}}"
id="{
{item.data.vid}}"
bindplay="handlePlay"
wx:else
/>
</view>
</scroll-view>
js页面:
handlePlay(e){
this.vid = e.currentTarget.id;
this.setData({
videoId:this.vid
});
this.videoContext = wx.createVideoContext(this.vid);
// 如果当前这个视频已经播放过,就跳转到指定的播放位置
l

文章讲述了在微信小程序中如何使用WXML和JS实现视频的滚动播放、暂停/播放切换以及自动定位到上次播放位置的功能,重点介绍了`video`组件和时间更新处理的代码实现。
最低0.47元/天 解锁文章
3694

被折叠的 条评论
为什么被折叠?



