音频进度条加拖拽改变进度

components/videoPreview/index.js

@@ -34,14 +34,6 @@ Component({
     videoInfo: {
       type: Object,
       value: {},
-      observer(newVal) {
-        /*   if (newVal.userReadExtend && newVal.userReadExtend.resourcesType == 1) {
-            newVal.userRead.title = newVal.userRead.title.split('\n')
-          } */
-        this.setData({
-          videoInfoCopy: newVal
-        })
-      }
     },
     videoType: {
       type: String,
@@ -62,14 +54,14 @@ Component({
   },
   data: {
     selfUid: wx.getStorageSync('uid'),
-    videoInfoCopy: {},
+    videoInfo: {},
   },
   lifetimes: {
     attached() {
       let {
         userReadExtend,
         userRead
-      } = this.data.videoInfoCopy
+      } = this.data.videoInfo
       if (userReadExtend.resourcesType == 1) {
         this.setData({
           endTime: setDuration(userRead.duration)
@@ -83,6 +75,11 @@ Component({
       this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
       this.submitPlayLog(this.properties.videoInfo.userRead.id)
     },
+    slider({
+      detail
+    }) {
+      this.triggerEvent('setSeek', detail.value / 100 * this.properties.videoInfo.userRead.duration)
+    },
     // 设置视频公开还是隐私
     async setVideoPublic() {
       let info = this.properties.videoInfo.userRead
@@ -99,7 +96,7 @@ Component({
         })
       }
       this.setData({
-        ['videoInfoCopy.userRead.status']: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+        ['videoInfo.userRead.status']: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
       })
     },
     // 点赞
@@ -112,8 +109,8 @@ Component({
       }
       await likeVideo(id)
       this.setData({
-        ['videoInfoCopy.isLike']: true,
-        ['videoInfoCopy.userRead.likeAmount']: this.data.videoInfoCopy.userRead.likeAmount + 1
+        ['videoInfo.isLike']: true,
+        ['videoInfo.userRead.likeAmount']: this.data.videoInfo.userRead.likeAmount + 1
       })
     },
     // 下载视频
@@ -209,7 +206,7 @@ Component({
         favoritesType: type
       })
       this.setData({
-        ['videoInfoCopy.isFavorites']: !this.data.videoInfoCopy.isFavorites
+        ['videoInfo.isFavorites']: !this.data.videoInfo.isFavorites
       })
     },
     // 关注
@@ -223,7 +220,7 @@ Component({
       this.triggerEvent('setListFans', this.properties.videoInfo.user.uid)
     },
     toPkPage() {
-      let videoInfo = this.data.videoInfoCopy
+      let videoInfo = this.data.videoInfo
       if (this.properties.videoType == 'pk') {
         if (videoInfo.user.uid == wx.getStorageSync('uid')) {
           return wx.showToast({
@@ -249,7 +246,7 @@ Component({
     },
     jumpUserInfo() {
       wx.navigateTo({
-        url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}&type=user`,
+        url: `/pages/personal/index?uid=${this.data.videoInfo.user.uid}&type=user`,
       })
     },
     // 控制音频播放

components/videoPreview/index.wxml

@@ -2,10 +2,10 @@
 <view class="work">
   <view class="workHead">
     <view class="wH-left">
-      <image src="{{videoInfoCopy.user.avatar}}" class="avatar" bindtap="jumpUserInfo" />
+      <image src="{{videoInfo.user.avatar}}" class="avatar" bindtap="jumpUserInfo" />
       <view class="wH-left-user">
-        <view class="nickname textOver">{{videoInfoCopy.user.nickName||videoInfoCopy.user.eid}}</view>
-        <view class="time">{{videoInfoCopy.userRead.day}}</view>
+        <view class="nickname textOver">{{videoInfo.user.nickName||videoInfo.user.eid}}</view>
+        <view class="time">{{videoInfo.userRead.day}}</view>
       </view>
     </view>
     <view class="wH-right" wx:if="{{videoType=='my'&&videoInfo.userRead.status!='CHECK'}}">
@@ -19,67 +19,66 @@
       </view>
       <view class="wH-right-btn" bindtap="setVideoPublic">
         <image class="img" style="width:30rpx"
-          src="{{videoInfoCopy.userRead.status==='NORMAL'? '/static/unlock.png': '/static/lock.png'}}" />
+          src="{{videoInfo.userRead.status==='NORMAL'? '/static/unlock.png': '/static/lock.png'}}" />
         <view class="text">
-          {{videoInfoCopy.userRead.status==='NORMAL'? '公开': '私密'}}
+          {{videoInfo.userRead.status==='NORMAL'? '公开': '私密'}}
         </view>
       </view>
     </view>
     <view class="wH-right"
-      wx:elif="{{videoType=='public'&&selfUid!=videoInfoCopy.user.uid||videoType=='excellent'&&selfUid!=videoInfoCopy.user.uid}}">
-      <view class="follow {{videoInfoCopy.isFans?'isFans':''}}" bindtap="setFans">
-        <image src="{{videoInfoCopy.isFans?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" mode="" />
-        <text class="text">{{videoInfoCopy.isFans?'已关注':'关注'}}</text>
+      wx:elif="{{videoType=='public'&&selfUid!=videoInfo.user.uid||videoType=='excellent'&&selfUid!=videoInfo.user.uid}}">
+      <view class="follow {{videoInfo.isFans?'isFans':''}}" bindtap="setFans">
+        <image src="{{videoInfo.isFans?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" mode="" />
+        <text class="text">{{videoInfo.isFans?'已关注':'关注'}}</text>
       </view>
     </view>
     <view class="wH-right" wx:elif="{{videoType=='pk'}}">
       <view class="pkNum">
-        {{videoInfoCopy.userRead.score>=0?videoInfoCopy.userRead.score+'分':''}}
+        {{videoInfo.userRead.score>=0?videoInfo.userRead.score+'分':''}}
       </view>
     </view>
   </view>
   <!-- 视频 -->
-  <view class="workContent" wx:if="{{!videoInfoCopy.userReadExtend||videoInfoCopy.userReadExtend.resourcesType==0}}">
+  <view class="workContent" wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
     <!-- 审核中遮罩 -->
-    <view class="videoBox" wx:if="{{videoInfoCopy.userRead.status=='CHECK'&&videoInfoCopy.userRead.id!=currentId}}">
+    <view class="videoBox" wx:if="{{videoInfo.userRead.status=='CHECK'&&videoInfo.userRead.id!=currentId}}">
       <view class="maskBg"></view>
       <image class="maskImg" src="/static/checking.png" />
-      <image class="cover" src="{{videoInfoCopy.userRead.coverImg}}" />
+      <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
     </view>
     <!--未播放-->
-    <view class="videoBox" wx:if="{{videoInfoCopy.userRead.status!='CHECK'&&videoInfoCopy.userRead.id!=currentId}}"
+    <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}"
       bindtap="playVideo">
       <image class="play" src="/static/play-btn.png" />
-      <image class="cover" src="{{videoInfoCopy.userRead.coverImg}}" />
+      <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
     </view>
     <!-- 视频水印 -->
-    <image src="{{videoInfoCopy.readMaskTemplate.imgPath}}" class="watermark"
-      style="pointer-events:{{videoInfoCopy.userRead.status!='CHECK'&&videoInfoCopy.userRead.id!=currentId?'auto':'none'}}"
-      bindtap="playVideo" wx:if="{{videoInfoCopy.userRead.status!='CHECK'}}" />
+    <image src="{{videoInfo.readMaskTemplate.imgPath}}" class="watermark"
+      style="pointer-events:{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId?'auto':'none'}}"
+      bindtap="playVideo" wx:if="{{videoInfo.userRead.status!='CHECK'}}" />
     <!-- 播放时渲染的video -->
-    <video class="video" id="myVideo" wx:if="{{videoInfoCopy.userRead.id==currentId}}"
-      src="{{videoInfoCopy.userRead.videoPath}}" autoplay="true" object-fit="contain">
+    <video class="video" id="myVideo" wx:if="{{videoInfo.userRead.id==currentId}}"
+      src="{{videoInfo.userRead.videoPath}}" autoplay="true" object-fit="contain">
     </video>
   </view>
   <!-- 音频 -->
   <view class="workContent" wx:else>
     <view class="audioBox" bindtap="audioPlay">
-      <image src=" {{videoInfoCopy.userReadExtend.backgroundVirtualImg}}" class="audioBg" mode="aspectFill" />
+      <image src=" {{videoInfo.userReadExtend.backgroundVirtualImg}}" class="audioBg" mode="aspectFill" />
       <view class="titleBox">
-        {{videoInfoCopy.userRead.title}}
+        {{videoInfo.userRead.title}}
       </view>
       <view class="audioPlay">
-        <image src="/static/audioBg.png" class="audioPlayBg {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
+        <image src="/static/audioBg.png" class="audioPlayBg {{videoInfo.userRead.id==currentId?'circle':''}}" />
         <image src="/static/zhen.png" class="audioPlayZhen" />
-        <image src="{{videoInfoCopy.userRead.coverImg}}"
-          class="cover {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
+        <image src="{{videoInfo.userRead.coverImg}}" class="cover {{videoInfo.userRead.id==currentId?'circle':''}}" />
       </view>
       <view class="progressBar">
-        <image src="{{videoInfoCopy.userRead.id==currentId?'/static/aStop.png':'/static/aPlay.png'}}"
-          class="audioSwitch" />
-        <view class="time">{{currentId == videoInfoCopy.userRead.id?currentTime:'00:00'}}</view>
-        <slider class="slider" value="{{currentId == videoInfoCopy.userRead.id?sliderValue:0}}" catchtap="false"
-          catchchange="slider" block-size='12' backgroundColor='#ffffff50' selected-color="#ffffff" />
+        <image src="{{videoInfo.userRead.id==currentId?'/static/aStop.png':'/static/aPlay.png'}}" class="audioSwitch" />
+        <view class="time">{{currentId == videoInfo.userRead.id?currentTime:'00:00'}}</view>
+        <slider class="slider" value="{{currentId == videoInfo.userRead.id?sliderValue:0}}" catchtap="false"
+          disabled="{{currentId != videoInfo.userRead.id}}" catchchange="slider" block-size='12'
+          backgroundColor='#ffffff50' selected-color="#ffffff" />
         <view class="time">{{endTime}}</view>
       </view>0
     </view>
@@ -90,17 +89,16 @@
       <view class="icon-name">分享</view>
     </button>
     <view class="mangeL-box" bindtap="collect">
-      <image src="{{videoInfoCopy.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode=""
-        class="icon" />
-      <view class="icon-name">{{videoInfoCopy.isFavorites?'已收藏':'收藏'}}</view>
+      <image src="{{videoInfo.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode="" class="icon" />
+      <view class="icon-name">{{videoInfo.isFavorites?'已收藏':'收藏'}}</view>
     </view>
     <view class="mangeL-box" bindtap="openComment">
       <image src="/static/comment.png" mode="" class="icon" />
-      <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.commentAmount)}}</view>
+      <view class="icon-name">{{filters.numFilter(videoInfo.userRead.commentAmount)}}</view>
     </view>
     <view class="mangeL-box" bindtap="likeVideo">
-      <image src="{{videoInfoCopy.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode="" class="icon" />
-      <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.likeAmount)}}</view>
+      <image src="{{videoInfo.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode="" class="icon" />
+      <view class="icon-name">{{filters.numFilter(videoInfo.userRead.likeAmount)}}</view>
     </view>
   </view>
   <block wx:if="{{videoType!='my'}}">

components/worksList/index.js

@@ -84,6 +84,7 @@ Component({
         worksListCopy
       })
     },
+ 
     addCommentNum({
       detail
     }) {

components/worksList/index.wxml

@@ -4,7 +4,8 @@
     currentTime="{{currentTime}}" sliderValue="{{sliderValue}}" videoInfo="{{item}}" index='{{index}}'
     currentId="{{currentId}}" data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
     data-type="{{!item.userReadExtend||item.userReadExtend.resourcesType==0?0:1}}" bind:openComment="openComment"
-    bind:setListFans="setListFans" bind:playAudio="playAudio" bind:playVideo="playVideo" bind:deleteVideo='deleteVideo'>
+    bind:setSeek="setSeek" bind:setListFans="setListFans" bind:playAudio="playAudio" bind:playVideo="playVideo"
+    bind:deleteVideo='deleteVideo'>
   </videoPreview>
   <Comment id="comment" tabBarPadding="{{tabBarPadding}}" bind:addCommentNum="addCommentNum" />
   <canvas id='share' class="share" type="2d"> </canvas>

mixins/video.js

@@ -5,7 +5,8 @@ import {
 module.exports = Behavior({
   data: {
     currentId: '',
-    sliderValue: 0
+    sliderValue: 0,
+    currentTime: '00:00'
   },
   properties: {},
   pageLifetimes: {
@@ -46,22 +47,25 @@ module.exports = Behavior({
       if (this.innerAudioContext) {
         this.resetAudio()
       }
-      /* else {
-             this.innerAudioContext = wx.createInnerAudioContext()
-             this.innerAudioContext.onEnded(res => {
-               this.resetAudio()
-             })
-           } */
+      this.setData({
+        currentId: currentTarget.dataset.id,
+        currentTime: '00:00',
+        sliderValue: 0
+      })
       this.innerAudioContext.src = currentTarget.dataset.audio
-      // this.innerAudioContext.onCanplay(() => {
       setTimeout(() => {
         this.innerAudioContext.play();
-      }, 500)
-      // })
-
-      this.setData({
-        currentId: currentTarget.dataset.id
-      })
+      }, 200)
+    },
+    // 设置音频播放进度
+    setSeek({
+      detail
+    }) {
+      this.innerAudioContext.pause();
+      this.innerAudioContext.seek(detail)
+      setTimeout(() => {
+        this.innerAudioContext.play()
+      }, 300)
     },
     // 重置音频
     resetAudio() {