小程序模板下载与定制平台
客服QQ客服QQ 客服微信客服微信 公众号公众号

微信小程序video组件initial-time属性BUG解决方法

我们来看微信小程序video标签的initial-time属性的描述:

小程序BUG,小程序解决BUG

指定视频初始播放位置,我这边是要做一个类似淘宝的商品详情播放视频的功能,我来举个例子:

我在商品详情页面播放视频进度到12秒,然后点击视频跳转到全屏播放,全屏我是单独做一个视频播放页处理的,所以我需要把视频播放进度传进视频播放页继续播放,这个视频播放页的视频一直播放到29秒,我退出视频播放页,需要把当前的29秒传回商品详情继续接着29秒播放,这个时候传回来的29秒赋值给video组件initial-time属性并不生效,到这一步,需要检查initial-time属性的值有没有生效,确认生效以后视频并没有接着播放,就可以按照我下面的代码来写。

重点

找到原因,initial-time属性值改变了但是没有生效,官方的描述是 “指定视频初始播放位置”,我们看下面代码:

wxml

<video wx:if="{{isShowVideo}}" initial-time="{{playVideoDuration}}" muted="{{isMuted}}" bindtimeupdate="bindtimeupdate" bindended="bindended" controls="{{videoControls}}" id="playVideo" poster="{{item.src}}?vframe/png/offset/1/w/400" src="{{item.src}}"></video>

js

// onShow调用此方法

returnShow(){

if(this.isProductDetailToPlayVideo === 1){

this.isProductDetailToPlayVideo = 0

let videoContext = wx.createVideoContext("playVideo")

if(videoContext){

videoContext.stop() //停止播放视频

}

this.isShowVideo = false  // 隐藏视频组件

this.playVideoDuration = 0 // 初始播放进度

this.$apply()

if(videoContext){

setTimeout(()=>{  //300毫秒延迟

this.isShowVideo = true //显示视频组件

this.playVideoDuration = wepy.$instance.globalData.playVideoDuration // 赋值继续播放的进度

videoContext.play() //开始播放视频

this.$apply()

},300)

}

}

console.error('returnShow')

}

所以,要想触发initial-time属性的值,就需要停止当前视频播放,然后wx:if隐藏视频,再300毫秒延迟以后,重新显示video组件,把播放进度重新赋值,再调用视频播放。大概就是这么一个流程。

其实我也觉得这样麻烦,但是这是我找到唯一的解决方法。

TAG标签:小程序BUG 小程序解决BUG

上一个:微信小程序开发中遇到的9个BUG及解决方法
下一个:最后一页

小程序模板

免责声明:本站资源均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑模板 版权所有 鲁ICP备20017802号

展开