【修复日常bug】解决微信小程序video组件initial-time属性不生效

我们来看微信小程序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组件，把播放进度重新赋值，再调用视频播放。大概就是这么一个流程。

 

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