1、视频

小程序提供了wx.createVideoContext(string id,Object this)、wx.chooseVideo(Object object)、wx.saveVideoToPhotosAlbum(Object object)等接口对手机视频进行操作。

1.1 wx.createVideoContext(string id,Object this)接口

创建 video 上下文 VideoContext 对象。

语法如下：

 this.videoContext=wx.createVideoContext('myVideo')

1.1.2 VideoContext对象常用函数

1.1.3 小案例

本例使用wx.createVideoContext()创建Video上下文videoContext对象，然后再对食品进行发送弹幕、播放、暂停、定位和回滚操作。

createVideoContext.wxml

 <view class="section tc">
   <video  id="myVideo"  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu  danmu-btn  controls ></video>
   <view class="btn-area">
     <input bindblur="bindInputBlur" />
     <button bindtap="bindSendDanmu">发送弹幕</button>
   </view>
 </view>
 <button type="primary" bindtap="audioPlay">播放</button>
 <button type="primary" bindtap="audioPause">暂停</button>
 <button type="primary" bindtap="audio14">跳到2分钟位置</button>
 <button type="primary" bindtap="audioStart">回到开头</button>

createVideoContext.js

 function getRandomColor() {
   const rgb = []
   for (let i = 0; i < 3; ++i) {
     let color = Math.floor(Math.random() * 256).toString(16)
     color = color.length == 1 ? '0' + color : color
     rgb.push(color)
   }
   return '#' + rgb.join('')
 }
 
 Page({
   onReady(res) {
     this.videoContext = wx.createVideoContext('myVideo')
   },
   inputValue: '',
   data: {
     src: '',
     danmuList: [
       {
         text: '第 1s 出现的弹幕',
         color: '#ff0000',
         time: 1
       },
       {
         text: '第 3s 出现的弹幕',
         color: '#ff00ff',
         time: 3
       }]
   },
   bindInputBlur(e) {
     this.inputValue = e.detail.value
   },
  
   bindSendDanmu() {
     this.videoContext.sendDanmu({
       text: this.inputValue,
       color: getRandomColor()
     })
   },
   audioPlay: function () {
     this.videoContext.play()    //播放
   },
   audioPause: function () {
     this.videoContext.pause()   //暂停
   },
   audio14: function () {
     this.videoContext.seek(120) //跳转到120秒处
   },
   audioStart: function () {
     this.videoContext.seek(0)   //回到开头
   }
 })

播放

跳转到2分钟位置：

回到开头：

1.2 wx.chooseVideo()接口

拍摄视频或从手机相册中选视频。wx.chooseVideo()接口参数如表所示。

object.success 回调函数

参数

Object res

示例代码

 wx.chooseVideo({
   sourceType: ['album','camera'],
   maxDuration: 60,
   camera: 'back',
   success(res) {
     console.log(res.tempFilePath)
   }
 })

1.2.1 小案例

本例使用wx.chooseVideo()接口选中手机上的某一视频，然后对选中的视频进行播放操作。

chooseVideo.wxml

 <view class="section tc">
   <video  id="myVideo"  src="{{src}}" danmu-list="{{danmuList}}" enable-danmu  danmu-btn  controls ></video>
 </view>
 <button type="primary" bindtap="uploadvideo">上传视频</button>
 <button type="primary" bindtap="audioPlay">播放</button>

chooseVideo.js

 Page({
   onReady(res) {
    
   },
   inputValue: '',
   data: {
     src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
   },
  
   uploadvideo: function () {
      var that=this;
     wx.chooseVideo({
       sourceType: ['album', 'camera'],
       maxDuration: 60,
       camera: 'back',
       success(res) {
         that.setData({
           src: res.tempFilePath
         })
         console.log(that.data.src)
       }
     })
   },
   audioPlay: function () {
     this.videoContext = wx.createVideoContext('myVideo')
     this.videoContext.play()
   }
 
 })

sourceType:[‘album’,’camera’]说明可以选择手机上的视频，也可以及时拍摄视频。在选择了新视频之后采用wx.createVideoContext()来获取VideoContext对象，使用this.videoContext.play()来播放选择的视频。

点击上传视频

点击播放(可以正常播放，测试正常)

1.3 wx.saveVideoToPhotosAlbum(Object object)接口

该接口保存视频到系统相册。支持mp4视频格式。

1.3.1 案例

本例使用wx.saveVideoToPhotosAlbum(Object object)接口保存一个视频到手机视频库中。

saveVideo.wxml

 <view class="section tc">
  <video  id="myVideo"  src="{{src}}" danmu-list="{{danmuList}}" enable-danmu  danmu-btn  controls></video>
 </view>
 <button type="primary" bindtap="save">保存视频</button>

saveVideo.js

 Page({
   
   inputValue: '',
   data: {
     src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
   },
  
   save: function () {
      var that=this;
     wx.downloadFile({
    
       url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',     //仅为示例，并非真实的资源
       success: function (res) {
         // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
         if (res.statusCode === 200) {
           wx.saveVideoToPhotosAlbum({
             filePath: res.tempFilePath,
             success(res) {
               wx.showToast({
                 title: '保存视频成功！',
               })
             },
             fail(res) {
               wx.showToast({
                 title: '保存图片失败！',
               })
             }
           })
         }
      
       }
 
     })
   }
 })

点击保存视频

我这里用的开发者工具模拟的，手机上面操作也是一样的。

原文始发于微信公众号（全栈开发那些事）：微信小程序视频操作