小程序音频和视频

客户需求：视频和音频只能观看和收听前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 });
  }
})