小程序——视频

吴声子夜歌2026-03-12 10:02

视频

    • [1、VideoContext wx.createVideoContext(string id, Object this)](#1、VideoContext wx.createVideoContext(string id, Object this))
    • [2、wx.chooseVideo(Object object)](#2、wx.chooseVideo(Object object))
    • [3、wx.saveVideoToPhotosAlbum(Object object)](#3、wx.saveVideoToPhotosAlbum(Object object))
    • [4、wx.openVideoEditor(Object object)](#4、wx.openVideoEditor(Object object))
    • [5、wx.getVideoInfo(Object object)](#5、wx.getVideoInfo(Object object))
    • [6、wx.compressVideo(Object object)](#6、wx.compressVideo(Object object))
    • [7、wx.checkDeviceSupportHevc(Object object)](#7、wx.checkDeviceSupportHevc(Object object))
    • [8、wx.chooseMedia(Object object)](#8、wx.chooseMedia(Object object))

1、VideoContext wx.createVideoContext(string id, Object this)

创建 video 上下文 VideoContext 对象。建议使用 wx.createSelectorQuery 获取 context 对象。

  • string id：video组件的id
  • Object this：在自定义组件下，当前组件实例的this，以操作组件内 video 组件

获取VideoContext对象之后，就可以对视频做相关操作了。VideoContext对象常用函数如表所示。

接口 功能和用途
VideoContext.play() 播放视频
VideoContext.pause() 暂停视频
VideoContext.stop() 停止视频
VideoContext.seek(number position) 跳转到指定位置
VideoContext.sendDanmu(Object data) 发送弹幕
VideoContext.playbackRate(number rate) 设置倍速播放
VideoContext.requestFullScreen(Object object) 进入全屏
VideoContext.exitFullScreen() 退出全屏
VideoContext.showStatusBar() 显示状态栏，仅在OS全屏下有效
VideoContext.hideStatusBar() 隐藏状态栏，仅在OS全屏下有效

仅支持网络url，无法播放项目内本地路径视频。

html 复制代码 
<view class="section tc">
  <video id="myVideo" src="http://127.0.0.1:8080/download/2.mp4" danmu-list="{{danmulist}}" enable-danmu danmu-btn controls style="width: 100%;"></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bind:tap="bindSendDanmu">发送弹幕</button>
  </view>
</view>
<button type="primary" bind:tap="audioPlay">播放</button>
<button type="primary" bind:tap="audioPause">暂停</button>
<button type="primary" bind:tap="audio14">跳到10s位置</button>
<button type="primary" bind:tap="audioStart">回到开头</button>
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({
  data: {
    src: '',
    danmuList: [
      {text: "第1s出现的弹幕", color: "#ff0000", time: 1},
      {text: "第3s出现的弹幕", color: "#ff00ff", time: 3}
    ]
  },
  inputValue: "",
  onReady: function(res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  audioPlay() {
    this.videoContext.play()
  },
  audioPause() {
    this.videoContext.pause()
  },
  audio14() {
    this.videoContext.seek(10)
  },
  audioStart() {
    this.videoContext.seek(0)
  }
})

2、wx.chooseVideo(Object object)

拍摄视频或从手机相册中选视频。

参数：Object object

属性 类型 默认值 必填 说明
sourceType Array.<string> 'album', 'camera' 否 视频选择的来源可选值如下： album:从相册选择视频 camera:使用相机拍摄视频
compressed boolean true 否 是否压缩所选择的视频文件
maxDuration number 60 否 拍摄视频最长拍摄时间，单位秒
camera string 'back' 否 默认拉起的是前置或者后置摄像头。部分 Android 手机下由于系统 ROM 不支持无法生效，可选值如下： back:后置摄像头 front:前置摄像头
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFilePath string 选定视频的临时文件路径 (本地路径)
duration number 选定视频的时间长度
size number 选定视频的数据量大小
height number 返回选定视频的高度
width number 返回选定视频的宽度
html 复制代码 
<view>
  <video style="width: 100%;" id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controlls></video>
</view>
<button type="primary" bind:tap="uploadvideo">上传视频</button>
<button type="primary" bind:tap="audioPlay">播放</button>
js 复制代码 
Page({
  data: {
    src: "",
  },
  inputValue: "",
  onReady(res) {

  },
  uploadvideo: function() {
    wx.chooseVideo({
      sourceType: ["album", "camera"],
      maxDuration: 60,
      camera: "back",
      success: (res)=>{
        this.setData({
          src: res.tempFilePath
        })
      }
    })
  },
  audioPlay: function() {
    this.videoContext = wx.createVideoContext('myVideo')
    this.videoContext.play()
  }
})

3、wx.saveVideoToPhotosAlbum(Object object)

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

参数：Object object

属性 类型 默认值 必填 说明
filePath string 是 视频文件路径，可以是临时文件路径也可以是永久文件路径 (本地路径)
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
html 复制代码 
<view>
  <video style="width:100%;" id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
</view>
<button type="primary" bind:tap="save">保存视频</button>
js 复制代码 
Page({
  inputValue: "",
  data: {
    src: "http://127.0.0.1:8080/download/2.mp4"
  },
  save: function() {
    wx.downloadFile({
      url: this.data.src,
      success: (res)=>{
        if(res.statusCode == 200) {
          wx.saveVideoToPhotosAlbum({
            filePath: res.tempFilePath,
            success: (res)=>{
              wx.showToast({
                title: "保存视频成功"
              })
            },
            fail: (res)=>{
              wx.showToast({
                title: "保存图片失败"
              })
            }
          })
        }
      }
    })
  }
})

4、wx.openVideoEditor(Object object)

打开视频编辑器

参数：Object object

属性 类型 默认值 必填 说明
filePath string 是 视频源的路径，只支持本地路径
minDuration string 是 视频裁剪的最小长度
maxDuration string 是 视频裁剪的最大长度
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
duration number 剪辑后生成的视频文件的时长，单位毫秒（ms）
size number 剪辑后生成的视频文件大小，单位字节数（byte）
tempFilePath string 编辑后生成的视频文件的临时路径
tempThumbPath string 编辑后生成的缩略图文件的临时路径

5、wx.getVideoInfo(Object object)

获取视频详细信息。

参数：Object object

属性 类型 默认值 必填 说明
src string 是 视频文件路径，可以是临时文件路径也可以是永久文件路径
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
orientation string 画面方向
type string 视频格式
duration number 视频长度
size number 视频大小，单位 kB
height number 视频的长，单位 px
width number 视频的宽，单位 px
fps number 视频帧率
bitrate number 视频码率，单位 kbps

6、wx.compressVideo(Object object)

压缩视频接口。开发者可指定压缩质量 quality 进行压缩。当需要更精细的控制时，可指定 bitrate、fps、和 resolution，当 quality 传入时，这三个参数将被忽略。原视频的相关信息可通过 getVideoInfo 获取。

参数：Object object

属性 类型 默认值 必填 说明
src string 是 视频文件路径，可以是临时文件路径也可以是永久文件路径
quality string 否 压缩质量，可选值为： low:低 medium:中 high:高
bitrate number 是 码率，单位 kbps
fps number 是 帧率
resolution number 是 相对于原视频的分辨率比例，取值范围(0, 1]
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFilePath string 压缩后的临时文件地址
size string 压缩后的大小，单位 kB

7、wx.checkDeviceSupportHevc(Object object)

查询设备是否支持 H.265 编码。

参数：Object object

属性 类型 默认值 必填 说明
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
supportHevc Boolean 设备是否支持 H.265 编码
js 复制代码 
wx.checkDeviceSupportHevc({
  success (res) {
    const supportHevc = res.supportHevc
  }
})

8、wx.chooseMedia(Object object)

拍摄或从手机相册中选择图片或视频。

参数：Object object

属性 类型 默认值 必填 说明
count number 9 否 最多可以选择的文件个数，基础库2.25.0前，最多可支持9个文件，2.25.0及以后最多可支持20个文件
mediaType Array.<string> 'image', 'video' 否 文件类型，可选值：image:只能拍摄图片或从相册选择图片 video:只能拍摄视频或从相册选择视频 mix:可同时选择图片和视频
sourceType Array.<string> 'album', 'camera' 否 图片和视频选择的来源，可选值： album:相册 camera:相机
maxDuration number 10 否 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
sizeType Array.<string> 'original', 'compressed' 否 是否压缩所选文件，基础库2.25.0前仅对 mediaType 为 image 时有效，2.25.0及以后对全量 mediaType 有效
camera string 'back' 否 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头，可选值如下： back:后置 front:前置
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFiles Array.<Object> 本地临时文件列表
type string 文件类型，有效值有 image 、video、mix

其中tempFiels结构如下：

结构属性 类型 说明
tempFilePath string 本地临时文件路径 (本地路径)
size number 本地临时文件大小，单位 B
duration number 视频的时间长度
height number 视频的高度
width number 视频的宽度
thumbTempFilePath string 视频缩略图临时文件路径
fileType string 文件类型，可选值如下： image:图片 video:视频
js 复制代码 
wx.chooseMedia({
  count: 9,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success(res) {
    console.log(res.tempFiles[0].tempFilePath)
    console.log(res.tempFiles[0].size)
  }
})
相关推荐
明哥聊AI4 小时前
AI音乐生成技术全景：Suno V4与Udio背后的音频扩散模型深度解析（2026最新）
人工智能·音视频
黄华SJ520it5 小时前
预约上门系统开发：懒人经济下的商业机遇与技术实践
小程序·系统开发
禹亮科技5 小时前
上海张江100㎡数据中心指挥中心音视频系统集成方案（思科+思必驰+利亚德 多平台会议适配）
音视频·视频会议系统集成·上海禹亮科技·思科视频会议终端·指挥中心系统搭建
小猴子爱上树8 小时前
Temu批量视频翻译Python实现方案
开发语言·python·音视频
软件技术新观察8 小时前
2026年北京教育医疗小程序与APP定制开发：十大服务商实力测评
大数据·小程序
AI服务老曹8 小时前
Docker部署AI视频分析平台项目实战记录
人工智能·docker·音视频
万岳科技程序员小金8 小时前
真人数字人小程序如何开发？AI数字人平台搭建流程全面解析
人工智能·小程序·ai数字人系统源码·ai数字人平台搭建·ai数字人小程序开发
2501_913981789 小时前
AI与边缘计算助力视频监控与智能预警安防物联网方案
人工智能·音视频·边缘计算·智能安防监控
大师兄666818 小时前
HarmonyOS7 音视频播放：AVPlayer 实战
音视频·avplayer·harmonyos7
言乐620 小时前
Python实现可运行解密游戏游戏框架
python·游戏·小程序·游戏程序·关卡设计
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna：官方性能数据与选型分析062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）09几个好用的ip纯净度检测网站102026 年 AI 大模型 & AI 编程工具实战全总结