小程序音频和视频

今天药忘吃喽~ 2022-04-22 00:46 252阅读 0赞

客户需求：视频和音频只能观看和收听前10秒，试听结束后，提示用户免费试看结束，需要付费了。

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

WXML:

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 });
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181101094618940.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20220422/4f67454d31cf4e16aecfe6a8a51529cb.png