''

app.json

@@ -654,6 +654,13 @@
         "infovideo"
       ]
     },
+    {
+      "root": "src/pages/interactcommentplay",
+      "name": "interactcommentplay",
+      "pages": [
+        "index"
+      ]
+    },
     {
       "root": "business/pages/coursemgt",
       "name": "coursemgt",

business/pages/commenteditor/videocomment.js

@@ -657,6 +657,7 @@ Page({
       honor: medals,
       type: 2,
     }
+    console.log(JSON.stringify(_content), 'JSON.stringify(_content),');
     this.commentPost(params);
   },
   commentPost(params) {

src/pages/interactcommentplay/index.js

+/*
+time: 2018-10-31
+author: wxl
+*/
+import {
+  judgeIsClock,
+  clockList,
+  joinCircle,
+  circleRemark,
+  circleDetail,
+  adInfoGet,
+  getPrize,
+  newLikeIndex,
+  newCommentIndex,
+} from '../../../service/customer/circleindex.js';
+import {
+  userShow,
+  themeDetail,
+  getclockread
+} from '../../../service/customer/themeindex.js';
+import {
+  wxOpenLocation,
+  wxNavigateToMiniProgram,
+  wxGetImageInfo,
+  wxPreviewImage,
+} from '../../../utilities/wxApi.js';
+import {
+  formIdCreate,
+  generateCustomerQrcode,
+  posterLog,
+  activityLog,
+  rankrecord,
+  integralLog,
+  getActivities,
+  generatePiiic
+} from '../../../service/common.js';
+import {
+  getSchoolDetail
+} from '../../../service/customer/schoolindex.js';
+import {
+  getwechatmobile,
+  activityconsumers,
+  activityprizestatus
+} from '../../../service/customer/activity.js';
+import {
+  LocalStorage,
+  imagify,
+  formatDate,
+  audioorigin,
+  videoPoster,
+  scenQueryGet,
+  getDailyMateria,
+  dateDetail,
+  debounce,
+} from '../../../utilities/index.js';
+import {
+  sharePosteCanvas
+} from '../../../utilities/generatePoster.js';
+import {
+  screenshot
+} from '../../../utilities/screenshot.js';
+import regexp from '../../../constants/regexp.js';
+import {
+	constants
+} from '../../../constants/index.js';
+var app = getApp();
+Page({
+  data: {
+    id: 0,
+    imageRoot: app.globalData.imageRoot,
+    imageVersion: app.globalData.imageVersion,
+    // drawinfo: {"audio":,"drawTrail":}
+    audioInfo: {"src":"mp3/clock-test/member/12186/2019-09-25/c7af4b1c4c8ff7e7d51ffa6701e4c094.aac","duration":14},
+    drawTrail: [{"type":"video","action":"play","timestamp":253},{"id":3,"url":"http://wxloss.oss-cn-hangzhou.aliyuncs.com/dakav5/2b/comment/medal_03.png","title":"小先锋","timestamp":5591,"type":"medal"},{"id":2,"url":"http://wxloss.oss-cn-hangzhou.aliyuncs.com/dakav5/2b/comment/medal_02.png","title":"坚持者","timestamp":6087,"type":"medal"},{"id":4,"url":"http://wxloss.oss-cn-hangzhou.aliyuncs.com/dakav5/2b/comment/medal_04.png","title":"小天才","timestamp":6750,"type":"medal"},{"timestamp":8472,"type":"flower"},{"timestamp":9406,"type":"flower"},{"type":"score","timestamp":11743,"score":35},{"timestamp":12622,"type":"flower"},{"timestamp":13150,"type":"flower"},{"type":"video","action":"pause","timestamp":14276}],
+    src: 'mp4/clock-test/consumer/111/2019-09-24/3f20078b59e134201e45f2de4e7a1980',
+    windowHeight: app.globalData.windowHeight,
+    windowWidth: app.globalData.windowWidth,
+    videoheight: app.globalData.windowHeight,
+    audioStorage: {},
+    videoInitStatus: {
+      autoplay: false,
+      loop: false,
+      muted: false,
+      showFullscreenBtn: false,
+      showCenterPlayBtn: true,
+      enablePlayGesture: true,
+      vslideGesture: true,
+      controls: false,
+    },
+    medalgivenarr: [],
+    flowergivenarr: [],
+    floweranimatedata: {},
+    positionObj: {
+
+    }
+  },
+  onLoad: function (options, b) { // Do some initialize when page load.
+    this.innerAudioContext = wx.createInnerAudioContext(); // 当前页面唯一的一个音频容器
+    this.videoContext = wx.createVideoContext('video');
+    this.play();
+    this.getElePosition('#flowershowbox', 'flowershowbox');
+    const that = this;
+    setTimeout(() => {
+      var animation = wx.createAnimation({
+        duration: 1000,
+        timingFunction: 'ease',
+      })
+      this.animation = animation;
+      animation.translate(that.data.positionObj['flowershowbox'].left - this.data.windowWidth / 2, that.data.positionObj['flowershowbox'].top - this.data.windowHeight / 2).step({ duration: 4000 })
+      this.setData({
+        floweranimatedata: animation.export()
+      })
+    }, 100)
+  },
+  onShow: function (options) { // Do something when page show.
+  },
+  onReady: function () { // Do something when page ready.
+    // this.caculateVideoHeight();
+  },
+  onHide: function () { // Do something when page hide.
+  },
+  caculateVideoHeight () {
+    var query = wx.createSelectorQuery();
+    //选择id
+    var that = this;
+    query.select('.commentcontrols').boundingClientRect(function (rect) {
+      that.setData({
+        videoheight: (that.data.windowHeight - rect.height - 20)
+      })
+    }).exec();
+  },
+  onUnload: function () { // Do something when page close.
+  },
+  onPullDownRefresh: function () { // Do something when pull down.
+  },
+  onReachBottom: function () { // Do something when page reach bottom.
+  },
+  resetAudiosPlayStatus() {
+    let audioStorage = this.data.audioStorage;
+    audioStorage.play = false
+    this.setData({
+      audioStorage,
+    })
+  },
+  getElePosition (id, name) {
+    const query = wx.createSelectorQuery();
+    //选择id
+    var that = this;
+    query.select(id).boundingClientRect(function (rect) {
+      that.data.positionObj[name] = rect;
+    }).exec();
+  },
+  play: function() {
+    let that = this;
+    let hasPreview = this.data.hasPreview;
+    if(hasPreview){
+      this.data.hasPreview = false;
+    }
+    this.innerAudioContext.src = audioorigin(this.data.audioInfo.src);
+    this.innerAudioContext.obeyMuteSwitch = false;
+    this.resetAudiosPlayStatus();
+    clearInterval(this.data.voiceInterval);
+    let audioStorage = this.data.audioStorage;
+    if (!audioStorage) {
+      audioStorage = {
+        play: true,
+        currentTime: 0,
+        duration
+      }
+    } else {
+      if (audioStorage.currentTime == audioStorage.duration) {
+        audioStorage.currentTime = 0;
+        audioStorage.play = true;
+      } else {
+        audioStorage.play = true;
+      }
+    }
+    this.innerAudioContext.seek(audioStorage.currentTime)
+    this.innerAudioContext.play();
+    this.voiceIntervalPlay(this.data.audioInfo.src);
+    this.setData({
+      audioStorage
+    })
+    this.videoContext.seek(0);
+    this.videoContext.play();
+    const drawTrail = JSON.parse(JSON.stringify(this.data.drawTrail));
+    if (drawTrail.length > 0) {
+      let pretimestamp = 0;
+      // that.data.drawTrail.shift(0, 1);
+      let currentPoint = drawTrail[0];
+      function fn(point) {
+        switch (point.type){
+          case "flower":
+            that.data.flowergivenarr.push(point);
+            that.setData({
+              flowergivenarr: that.data.flowergivenarr
+            })
+            break;
+          case "score":
+            break;
+          case "medal":
+            that.data.medalgivenarr.push(point);
+            that.setData({
+              medalgivenarr: that.data.medalgivenarr
+            })
+            break;
+          case "video":
+              if (point.action == 'pause') {
+                that.videoContext.pause()
+              } else if (point.action == 'play') {
+                that.videoContext.play()
+              }
+              break;
+        }
+        clearTimeout(that.playTimeOut);
+        pretimestamp = point.timestamp;
+        drawTrail.splice(0, 1);
+        currentPoint = drawTrail[0];
+        if(currentPoint){
+          that.playTimeOut = setTimeout(() => {
+            fn(currentPoint);
+          }, currentPoint.timestamp - pretimestamp);
+        }
+      }
+      setTimeout(() => {
+        fn(currentPoint);
+      }, currentPoint.timestamp - pretimestamp)
+    };
+    this.data.hasPreview = true;
+  },
+  voiceIntervalPlay(value) { // 初始化录音的状态
+    let voiceInterval = setInterval(() => {
+      let audioStorage = this.data.audioStorage;
+      let currentTime = ++audioStorage.currentTime;
+      this.setData({
+        audioStorage
+      })
+      if (currentTime >= this.data.audioInfo.duration) {
+        audioStorage.play = false;
+        audioStorage.currentTime = 0;
+        this.setData({
+          audioStorage
+        })
+        clearInterval(this.data.voiceInterval);
+      }
+    }, 1000);
+    this.setData({
+      voiceInterval
+    })
+  },
+})
\ No newline at end of file

src/pages/interactcommentplay/index.json

+{
+  "navigationBarTitleText": "互动点评",
+  "enablePullDownRefresh": true,
+  "navigationStyle": "custom",
+  "navigationBarBackgroundColor": "#FFD146",
+  "usingComponents": {
+  }
+}
\ No newline at end of file

src/pages/interactcommentplay/index.wxml

+<wxs src="./../../../filter/index.wxs" module="filter" />
+<view class="container">
+    <video
+        class="videobox"
+        src="{{filter.ossVideofy(src)}}"
+        style="height: {{videoheight}}px;"
+        initial-time="0"
+        autoplay="{{videoInitStatus.autoplay}}"
+        loop="{{videoInitStatus.loop}}"
+        muted="{{videoInitStatus.muted}}"
+        direction="0"
+        show-fullscreen-btn="{{videoInitStatus.showFullscreenBtn}}"
+        show-center-play-btn="{{videoInitStatus.showCenterPlayBtn}}"
+        enable-play-gesture="{{videoInitStatus.enablePlayGesture}}"
+        vslide-gesture="{{videoInitStatus.vslideGesture}}"
+        controls="{{videoInitStatus.controls}}"
+        id="video"
+    >
+    </video>
+    <view class="flowerbox" animation="{{floweranimatedata}}">
+        <image class="floweritem" src="{{imageRoot}}2b/comment/icon_flower.png?{{imageVersion}}"></image>
+    </view>
+    <view id="flowershowbox" class="flowershowbox">
+        <view class="flowershowitemcircle">
+            <image class="flowershowitem" src="{{imageRoot}}2b/comment/icon_flower.png?{{imageVersion}}"></image>
+        </view>
+        <text class="flowershowcount">X1</text>
+    </view>
+    <view class="commentcontrols">
+        <!-- <view class="play-btn"      data-value="{{item.src}}" data-duration="{{item.duration}}" bindtap="playvoice" wx:if="{{!audioStorage[item.src] || !audioStorage[item.src].play}}">
+            <image class="play-btn-icon" src="{{imageRoot}}2b/common/playicon.png?{{imageVersion}}" ></image>
+        </view>
+        <view class="pause-btn" wx:if="{{audioStorage[item.src] && audioStorage[item.src].play}}" data-value="{{item.src}}" bindtap="pausevoice" data-duration="{{item.duration}}">
+            <image class="pause-btn-icon" src="{{imageRoot}}2b/common/pauseicon.png?{{imageVersion}}" ></image>
+        </view> -->
+        <view class="play-time"     >
+            <!-- {{audioStorage[item.src] && filter.voiceTimeFormat(audioStorage[item.src].currentTime) || filter.voiceTimeFormat(0)}} -->
+            12:00
+        </view>
+        <!-- <slider
+            class="play-progree"
+            bindtouchstart="slidestart"
+            bindtouchend="slideend"
+            bindchange="voiceslide"
+            data-value="{{item.src}}"
+            block-size="12"
+            min="{{0}}"
+            activeColor="#609AEE"
+            block-color="#65B8F4"
+            color="#00000033"
+            data-duration="{{item.duration}}"
+            max="{{item.duration}}"
+            value="{{audioStorage[item.src] && audioStorage[item.src].currentTime || 0}}"
+        /> -->
+        <slider
+        />
+        <view class="total-time"     >
+            <!-- {{filter.voiceTimeFormat(item.duration)}} -->
+            12:00
+        </view>
+    </view>
+</view>
\ No newline at end of file

src/pages/interactcommentplay/index.wxss

+.container {
+    height: 100vh;
+    position: relative;
+}
+.videobox {
+    width: 100%;
+    z-index: 1;
+}
+.flowerbox {
+    position: fixed;
+    width: 102rpx;
+    height: 160rpx;
+    left: 50%;
+    top: 50%;
+    margin-top: -80rpx;
+    margin-left: -50rpx;
+    z-index: 999;
+}
+.flowerbox .floweritem {
+    width: 102rpx;
+    height: 160rpx;
+    display: block;
+}
+.flowershowbox {
+    position: fixed;
+    left: 620rpx;
+    top: 1077rpx;
+    display: flex;
+    align-items: center;
+    z-index: 999;
+    /* visibility: hidden; */
+}
+.flowershowitemcircle {
+    width: 66rpx;
+    height: 66rpx;
+    background-color:rgba(0,0,0,0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.flowershowbox .flowershowitem {
+    width: 30rpx;
+    height: 50rpx;
+    /* background-color: #fff; */
+}
+.flowershowbox .flowershowcount {
+    color: #fff;
+    padding-left: 10rpx;
+    line-height: 1;
+}
\ No newline at end of file