微信小程序视频插件 语音插件

小程序视频组件video标签

  • wxml：
 1 <View>1.播放网络视频</View>
 2 <view >
 3  <video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback"></video>
 4 </view>
 5 <View>2.播放本地视频</View>
 6 <view style="display: flex;flex-direction: column;">
 7  <video style="width: 100%;height=400px;margin:1px;" src="{{src}}"></video>
 8  <view class="btn-area">
 9  <button bindtap="bindButtonTap">打开本地视频</button>
10  </view>
11 </view>

 

  • js：
 1 Page({
 2  data: {
 3   src: ''
 4  },
 5  /**
 6   * 打开本地视频
 7   */
 8  bindButtonTap: function() {
 9   var that = this
10   //拍摄视频或从手机相册中选视频
11   wx.chooseVideo({
12    //album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
13    sourceType: ['album', 'camera'],
14    //拍摄视频最长拍摄时间，单位秒。最长支持60秒
15    maxDuration: 60,
16    //前置或者后置摄像头，默认为前后都有，即：['front', 'back']
17    camera: ['front','back'],
18    //接口调用成功，返回视频文件的临时文件路径，详见返回参数说明
19    success: function(res) {
20     console.log(res.tempFilePaths[0])
21     that.setData({
22      src: res.tempFilePaths[0]
23     })
24    }
25   })
26  },
27  /**
28   * 当发生错误时触发error事件，event.detail = {errMsg: 'something wrong'}
29   */
30  videoErrorCallback: function(e) {
31   console.log('视频错误信息:')
32   console.log(e.detail.errMsg)
33  }
34 })

小程序音频 audio.js：

  • wxml：
1 <!-- audio.wxml -->
2 <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
3 
4 <button type="primary" bindtap="audioPlay">播放</button>
5 <button type="primary" bindtap="audioPause">暂停</button>
6 <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
7 <button type="primary" bindtap="audioStart">回到开头</button>
  • js：
 1 Page({
 2   onReady: function (e) {
 3     // 使用 wx.createAudioContext 获取 audio 上下文 context
 4     this.audioCtx = wx.createAudioContext('myAudio')
 5   },
 6   data: {
 7     poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
 8     name: '此时此刻',
 9     author: '许巍',
10     src: 'https://demo.dj63.com//2017/user_up/qq1487483943/20170219/%E8%A5%BF%E6%B5%B7%E6%83%85%E6%AD%8C%E9%99%8D%E5%A4%AE%E5%8D%93%E7%8E%9BDJ%E5%9D%9A%E5%B0%91mix2017.mp3',
11   },
12   audioPlay: function () {
13     this.audioCtx.play()
14   },
15   audioPause: function () {
16     this.audioCtx.pause()
17   },
18   audio14: function () {
19     this.audioCtx.seek(14)
20   },
21   audioStart: function () {
22     this.audioCtx.seek(0)
23   }
24 })

 

posted @ 2021-03-16 10:16  Me爱码士  阅读(38)  评论(0)  编辑  收藏  举报