我们来看微信小程序video标签的initial-time属性的描述:
指定视频初始播放位置,我这边是要做一个类似淘宝的商品详情播放视频的功能,我来举个例子:
我在商品详情页面播放视频进度到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组件,把播放进度重新赋值,再调用视频播放。大概就是这么一个流程。
其实我也觉得这样麻烦,但是这是我找到唯一的解决方法。
原文链接:https://blog.csdn.net/qq_35610214/article/details/103195024
可用但是我 在 全屏的时候 改进度 隐藏播放器 会退出来
我按你的思路还是不管用啊