微信小程序video视频组件

微信小程序video视频组件

video是专门用来播放视频的一个组件，video组件默认自带了样式，并且上面有播放、暂停、进度条和全屏按钮，这些组件也可以通过属性设置来显示隐藏。样式如图所示：

video属性如表所示：

在对视频的处理中，微信团队提供了两个特有的API。

保存视频需要用户授权：wx.saveVideoToPhotosAlbum，代码示例如下：

// Video.js文件
wx.saveVideoToPhotosAlbum({
  filePath: '视频的路径',
  success: funcation(res){
// 成功保存
  },
  fail: funcation(err){
// 失败 err为失败原因
  },
  complete: function(){
  // 完成，对错都会跑到这个函数
  }
})

拍摄视频或选择视频：wx.chooseVideo，代码示例如下：

        // Video.js文件
        wx.chooseVideo({
          // album为相册选取，camera为相机拍摄
          sourceType: ['album','camera'],
          // 1.6.0以上才可以使用是否压缩选择的视频文件
          compressed: 'true',
          // 最长拍摄时间，单位为秒
          maxDuration: '60',
          // 调用前置摄像头(front)还是后置摄像头(back)
          camera: 'back',
          success: funcation(res){
            // 拍摄成功
            //res.tempFilePath 视频的临时文件路径
            //res.duration 视频的时间长度
            //res.size 视频的大小
            //res.height 视频的高度
            //res.width 视频的宽度
          },
          fail: funcation(err){
            // 失败 err为失败原因
          },
          complete: function(){
            // 完成，对错都会跑到这个函数
          }
        })

在JavaScript文件中需要获取到对应video的上下文，然后才能调用对应的API来进行控制，获取video对应的上下文代码为“wx.createVideoContext(‘idName’,’Object this’)”。

• 播放视频API：VideContext.play()。
• 暂停视频API：VideoContext.pause()。
• 停止视频API：VideContext.stop()。
• 跳转到某个时间API：VideoContent.seek(number)。
• 倍速播放API：VideContext.playbackRate(number)，倍速播放目前只支持0.5/0.8/1.0/1.25/1.5。
• 退出全屏API：VideoContent.exitFullScreen()。
• 进入全屏API：VideoContent.requestFullScreen({direcation:number})number为0时竖屏，为90时屏幕逆时针90度，为-90时屏幕顺时针90度。
• iOS显示状态栏API：VideoContent.showStatusBar()。
• iOS隐藏状态栏API：VideoContent.hideStatusBar()。

酷客网相关文章：

• 微信小程序audio音频组件
• 微信小程序camera相机组件
• 微信小程序picker-view嵌入式滚动选择器组件
• 微信小程序picker滚动选择器组件