小程式音訊和視訊

客戶需求：視訊和音訊只能觀看和收聽前10秒，試聽結束後，提示使用者免費試看結束，需要付費了。

效果圖：

 

WXML:

<view>
  <view class='time'>
    當前試看10秒!!!
  </view>
  <video id="myVideo" src="{{videoSrc}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls bindtap='audioPlayed' bindtimeupdate="timeUpdate"></video>
  <button bindtap="bindPlay" class="page-body-button" type="primary">播放</button>
  <button bindtap="bindPause" class="page-body-button" type="primary">暫停</button>
  <!-- 這裡只是使用audio的音訊樣式，播放音訊使用的wx.createInnerAudioContext();方法 -->
  <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
  <view class='time'>
    當前試聽10秒!!!
  </view>
  <button type="primary" bindtap="audioPlay" class='audioPy'>播放</button>
  <button type="primary" bindtap="audioPause" class='audioPy'>暫停</button>
</view>

WXSS:

.time{font-size: 35rpx;text-align: center;padding: 10px 0;}
video{width: 300px;height: 225px;margin: 0 auto;display: block;}
.page-body-button {margin-top: 30px;}
audio{margin: 30px auto;display: block;width: 300px;}
.audioPy{margin-bottom: 30px;}

index.js:

// 音訊獲取
const myaudio = wx.createInnerAudioContext();
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    // 視訊資料
    videoSrc: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    danmuList: [{
        text: '第 1s 出現的彈幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出現的彈幕',
        color: '#ff00ff',
        time: 3
      }
    ],
    // 音訊資料
    isplay: false,//是否播放
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name: '工作計劃',
    author: 'Bright2017',
    // 當前播放時間
    currentTime:0,
    interval: ""      //定時器
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function() {
    // 視訊
    this.videoContext = wx.createVideoContext('myVideo');
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function() {
// 頁面展示時設定音訊路徑
    myaudio.src = "xxxxxxxxxxxxx.mp3"
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function() {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function() {

  },
  // 視訊播放
  bindPlay: function() {
    this.videoContext.play();
  },
  // 視訊暫停
  bindPause: function() {
    this.videoContext.pause();
  },
  // 視訊實時播放時間
  timeUpdate: function(e) {
    const that = this;
    // 當前播放時間
    const currentTime = e.detail.currentTime;
    if (currentTime >= 10) {
      // 暫停
      that.videoContext.pause();
      // 提示使用者付費
      wx.showModal({
        title: '溫馨提示!',
        content: '您當前最多隻能觀看前10秒的內容!請付費檢視完整視訊!',
        success(res) {
          if (res.confirm) {
            console.log('使用者點選確定');
            //這裡可以跳轉到付費頁面了
          } else if (res.cancel) {
            console.log('使用者點選取消')
          }
        }
      })
    }
  },
  // 播放音訊
  audioPlay: function () {
    const that=this;
    myaudio.play();
    this.setData({ isplay: true });
    var time = that.data.time;
    console.log("倒數計時開始")
    var interval = setInterval(function () {
      myaudio.currentTime
      myaudio.onTimeUpdate(() => {
        console.log(myaudio.duration)   //總時長
        console.log('播放時間:', myaudio.currentTime)   //當前播放進度
        var audioTime = myaudio.currentTime;
        that.setData({ currentTime: audioTime });
      })






      // 條件達到時停止定時器
      if (that.data.currentTime >= 10) {
        console.log("歸0~~~", that.data.currentTime);
        clearInterval(interval);
        console.log("99999");
        // 暫停音訊
        myaudio.pause();
        // 結束語音播放
        // wx.stopVoice()
        that.setData({ isplay: false });
        wx.showModal({
          title: '溫馨提示!',
          content: '您當前最多隻能試聽前10秒的內容!請付費!',
          success(res) {
            if (res.confirm) {
              console.log('使用者點選確定')
            } else if (res.cancel) {
              console.log('使用者點選取消')
            }
          }
        })
      }
    }, 1000)

    that.setData({
      interval: interval
    })

  },
  // 暫停音訊
  audioPause: function () {
    myaudio.pause();
    this.setData({ isplay: false });
  }
})