Traffic-widget/miniprogram/pages/video/video.js

// miniprogram/pages/video/video.js
const app = getApp()
import { formatTime } from "../../utils/util"
Page({
  /**
   * 页面变量
   */
  lastUp: 0,
  playIndex: 0,
  duration: 0,
  lastTime: 0,
  allDuration: 0,
  touchtVideoStart: 0,
  touchtVideoStartTime: 0,
  audioTextUrl: "",
  progressWidth: 0,
  lastProTime: (new Date()) - 251,
  operation: {
    step: [],
    index: 0
  },
  /**
   * 页面的初始数据
   */
  data: {
    stepIndex: 0,
    isScroll: false,
    maxStepIndex: 0,
    allDurationFormat: "00:00:00",
    durationFormat: "00:00:00",
    textClip: undefined,
    playStatus: false,
    currentValue: "",
    active: "none",
    showBg: false,
    muted: true,
    imgFrame: [],
    playerCom: 1,
    progress: 0,
    music: [],
    urlTwo: {
      url: "",
      i: 0
    },
    urlOne: {
      url: "",
      i: 0
    },
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.setStorageSync('music', "");
    let allDuration = 0;
    let imgFrame = [];
    let p = {};
    let pageData = getCurrentPages();
    let initData = app.globalData.generate[pageData[pageData.length - 1].options.select] || {};
    this.player = wx.createVideoContext('myVideo');
    this.player2 = wx.createVideoContext('myVideo2');
    if (pageData[pageData.length - 1].options.select !== undefined) {
      app.globalData.select = [initData];// 查看已经生成
      p.muted = false;
    }
    app.globalData.select.map(v => {
      allDuration += v.secDuration * 100;
      if (pageData[pageData.length - 1].options.select !== undefined) {
        let l = v.clips || []
        imgFrame = imgFrame.concat(...l.map(m => {
          return m.snaps
        }))
      } else imgFrame = imgFrame.concat(v.snaps)
    })
    // 总时长
    allDuration = Math.ceil(allDuration / 100);
    this.allDuration = allDuration;
    p.currentValue = initData.currentValue || "";
    p.music = initData.music || [];
    p.imgFrame = imgFrame;
    p.urlOne = {
      url: app.globalData.select[0].video,
      i: 0,
    };
    p.allDurationFormat = this.format(allDuration);
    if (app.globalData.select.length >= 2) {
      p.urlTwo = {
        url: app.globalData.select[1].video,
        i: 1,
      }
    }
    this.setData(p);
    // 获得屏幕宽
    const query = wx.createSelectorQuery();
    query.select('.progressLong').boundingClientRect((res) => {
      this.progressWidth = res.width;
    }).exec();
  },

  onUnload() {
    this.audio && this.audio.destroy();
    this.audioText && this.audioText.destroy();
    this.pause();
  },

  /**
   * 播放进度更新
   */
  upProgress: function (e) {
    let newTime = new Date();
    if (this.data.isScroll || !e.detail.duration || newTime - this.lastProTime < 30) return;
    this.lastProTime = newTime - 0;
    let list = app.globalData.select || [];
    let endIndex = this.playIndex;
    let duration = 0;
    // 记录当前播放时间占总时长
    for (let i = 0; i < endIndex; i++) {
      const v = list[i];
      duration += v.secDuration;
    }
    duration += e.detail.currentTime;
    this.duration = duration;
    this.setData({
      durationFormat: this.format(Math.ceil(this.duration)),
      progress: duration / this.allDuration * this.progressWidth
    })
  },

  /**
   * 切换播放器
   */
  videoEnd() {
    this.player.pause();
    this.player2.pause();

    let playIndex = this.playIndex + 1 > app.globalData.select.length - 1 ? 0 : this.playIndex + 1;
    let newPlay = playIndex % 2 === 0;
    let next = {
      url: app.globalData.select[playIndex].video,
      i: playIndex
    }
    let nnext = app.globalData.select[playIndex + 1] ? {
      url: app.globalData.select[playIndex + 1].video,
      i: playIndex + 1
    } : undefined
    let p = {
      playerCom: newPlay
    }
    if (newPlay) {
      // 第一个
      p.urlOne != next && (p.urlOne = next);
      nnext && (p.urlTwo = nnext);
    } else {
      // 第二个
      p.urlTwo != next && (p.urlTwo = next);
      nnext && (p.urlOne = nnext);
    }
    this.setData(p, () => {
      if (this.playIndex + 1 > app.globalData.select.length - 1) {
        console.log("片段结束-------->", this.progressWidth)
        this.audio && this.audio.pause();
        this.audioText && this.audioText.pause();
        this.audio && this.audio.seek(0);
        this.audioText && this.audioText.seek(0);
        this.playIndex = 0;
        this.setData({ playStatus: false, progress: this.progressWidth })
      } else if (this.data.playStatus) {
        this.playIndex++;
        if (newPlay) this.player.play();
        else this.player2.play();
      }
    })

  },

  /**
   * 加载中
   */
  bindwaiting() {
    console.log("加载--------->");
  },
  /**
   * 播放中
   */
  bindplay() {
    console.log("播放--------->")
  },
  /**
   * 加载进度
   */
  bindprogress1(e){
    console.log("加载进度1--------->",e.detail)
  },
  bindprogress2(e){
    console.log("加载进度2--------->",e.detail)
  },

  play() {
    let newPlay = this.playIndex % 2 === 0;
    if (newPlay) this.player.play();
    else this.player2.play();
    this.audio && this.audio.play();
    this.audioText && this.audioText.play();
    this.setData({
      playStatus: true
    })
  },
  seek(s) {
    let dur = 0;
    for (let i = 0; i < app.globalData.select.length; i++) {
      const v = app.globalData.select[i];
      if (dur + v.secDuration >= s) {
        this.playIndex = i;
        let sec = s - dur;
        let newPlay = i % 2 === 0;
        sec < 0.1 && (sec = 0);
        if (newPlay) { this.player.seek(sec); this.player2.seek(0); }
        else { this.player2.seek(sec); this.player.seek(0); }
        this.audio && this.audio.seek(0);
        this.audioText && this.audioText.seek(0);
        this.upProgress({
          detail: {
            currentTime: sec,
            duration: s
          }
        })
        let one = app.globalData.select[i] || {};
        let two = app.globalData.select[i + 1] || app.globalData.select[0] || {};
        this.setData({
          playerCom: newPlay,
          urlOne: newPlay ? {
            url: one.video,
            i: i,
          } : {
              url: two.video,
              i: i + 1,
            },
          urlTwo: !newPlay ? {
            url: one.video,
            i: i,
          } : {
              url: two.video,
              i: i + 1,
            },
        })
        break
      }
      dur += v.secDuration;
    }
  },
  pause() {
    let newPlay = this.playIndex % 2 === 0;
    if (newPlay) this.player.pause();
    else this.player2.pause();
    this.audio && this.audio.pause();
    this.audioText && this.audioText.pause();
    this.setData({
      playStatus: false
    })
  },

  endProgress() {
    this.setData({
      isScroll: false,
    })
  },

  /**
   * 格式化时分秒
   * @param {*} s 
   */
  format(s) {
    let sco = Math.floor(s % 60);
    let min = Math.floor(s / 60);
    let hour = Math.floor(min / 60);
    let time = hour > 9 ? hour : "0" + hour;
    time += min > 9 ? ":" + min : ":0" + min;
    time += sco > 9 ? ":" + sco : ":0" + sco;
    return time
  },

  acttouch(e) {
    this.pause();
    this.setData({
      playStatus: false,
      isScroll: true
    })
    this.touchtVideoStart = e.changedTouches[0].pageX;
    this.touchtVideoStartTime = this.duration;
  },

  // 滚动播放进度
  moveProgress(e) {
    if (!this.data.isScroll) return
    let p = this.progressWidth / this.allDuration;
    let duration = e.detail.scrollLeft / p;
    duration < 0 ? duration = 0 : duration > this.allDuration ? duration = this.allDuration : "";
    this.duration = duration;
    this.setData({
      durationFormat: this.format(Math.ceil(duration)),
    })
    this.seek(this.duration)
    console.log('滑动触发更新播放进度------->', duration);
  },

  showText() {
    this.pause();
    this.setData({
      active: "text",
      showBg: !this.data.showBg,
      playStatus: false
    })
  },

  showMusic() {
    this.pause();
    
    this.setData({
      active: 'music',
      showBg: !this.data.showBg,
      playStatus: false
    })
  },

  handleMusicChange(e) {
    this.setAudio('audio', e.detail.Url);
    this.setData({
      music: [e.detail],
      active: 'none',
      showBg: !this.data.showBg
    }, () => {
      this.seek(0);
      if (!e.detail.notClick) this.addStep();
    })
  },

  handleMusicRemove(e) {
    this.setAudio('audio');
    this.setData({
      music: []
    }, () => {
      this.addStep();
    })
  },


  showBag() {
    this.setData({
      active: "none",
      showBg: !this.data.showBg
    })
  },

  setAudio(type, url) {
    this[type] && this[type].destroy();
    if (!url) return
    this[type] = wx.createInnerAudioContext()
    this[type].src = url // src 可以设置 http(s) 的路径，本地文件路径或者代码包文件路径
    this[type].autoplay = true
    this[type].loop = type === "audio"
    this[type].pause();
    this[type].seek(0);
  },

  // 增加/修改文字
  handleText(e) {
    console.log(e)
    this.setAudio('audioText', e.detail.Url.voice.audio);
    this.audioTextUrl = e.detail.Url.voice.audio;
    this.setData({
      active: "none",
      currentValue: e.detail.currentValue,
      showBg: !this.data.showBg
    }, () => {
      this.addStep();
      this.seek(0);
    })
  },

  share() {
    if (!app.globalData.select.length) return wx.showToast({
      title: "请选择视频",
      icon: "none"
    });
    wx.showLoading({
      title: "视频生成中..."
    });
    let indexs = app.globalData.select[0].id.split("-");
    let oritem = app.globalData.oriList[indexs[0]] ? app.globalData.oriList[indexs[0]] : {};
    let item = JSON.parse(JSON.stringify(oritem));
    item.type = "video";
    item.video = item.result ? item.result.result_video : "";
    item.secDuration = item.result ? item.result.duration : "";
    item.music = this.data.music;
    item.duration = this.format(this.allDuration);
    item.update = formatTime(new Date());
    !this.data.currentValue && (item.voice = "")
    this.data.currentValue && (item.currentValue = this.data.currentValue);

    let pageData = getCurrentPages();
    let index = pageData[pageData.length - 1].options.select;
    item.id = app.globalData.generate.length + '-';
    if (index >= 0) {
      item.id = index + '-';
      app.globalData.generate[index] = item;
    } else app.globalData.generate.push(item);
    wx.setStorageSync("generated", JSON.stringify(app.globalData.generate));
    let T = setTimeout(() => {
      clearTimeout(T);
      wx.hideLoading({
        success() {
          // wx.redirectTo({
          //   url: "/pages/index/index",
          // });
          wx.navigateBack({
            delta: 11
          })
        }
      });
    }, Math.random() * 2000);
  },

  /**
   * 添加步骤
   */
  addStep() {
    this.operation.step.splice(this.operation.index, this.operation.step.length);
    this.operation.index += 1;

    this.operation.step.push({
      music: JSON.stringify(this.data.music),
      currentValue: this.data.currentValue,
      audioTextUrl: this.audioTextUrl,
      select: JSON.stringify(app.globalData.select)
    })
    this.setData({
      stepIndex: this.operation.index,
      maxStepIndex: this.operation.step.length
    })
  },
  toStep(i) {
    let _this = this;
    if (i > this.operation.step.length || i === this.operation.index) return wx.showToast({ title: "步骤错误！", icon: "none" });
    let item = this.operation.step[i - 1] || {};
    let music = JSON.parse(item.music || '[]');
    this.operation.index = i;
    // 先将原音频销毁
    this.setAudio('audio');
    this.setAudio('audioText');
    music.length && this.setAudio('audio', music[0].Url)
    item.audioTextUrl && this.setAudio('audioText', item.audioTextUrl)
    this.setData({
      stepIndex: i,
      music,
      currentValue: item.currentValue || "",
      maxStepIndex: this.operation.step.length
    }, () => {
      _this.seek(0);
      _this.pause();
    })

  },
  backStep() {
    if (this.operation.index <= 0) return;
    this.toStep(this.operation.index - 1);
    this.setData({
      stepIndex: this.operation.index,
    })
  },
  backNext() {
    if (this.operation.index + 1 > this.operation.step.length) return;
    this.toStep(this.operation.index + 1);
    this.setData({
      stepIndex: this.operation.index,
    })
  }
})