小程序——视频

吴声子夜歌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)
  }
})
相关推荐
RTC实战笔记6 天前
Android 实时音视频接入教程：媒体补充增强信息（SEI）
音视频·媒体·rtc
潜创微科技7 天前
HDMI1.3 无线传输芯片方案 空旷 150 米量产级音视频方案
音视频
m0_526119407 天前
iconfont我修改好颜色，但是在小程序项目是黑色的
小程序
VidDown7 天前
VidDown 工具站：免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
换个昵称都难7 天前
音频格式之WAV
音视频
AI创界者7 天前
PilotTTS 一键整合包（Win/Mac）：8G 显存畅跑，实测解锁情绪与副语言的精准控制
人工智能·macos·aigc·音视频
u152109648497 天前
S.S.Audio PRO A2音频隔离器
嵌入式硬件·音视频·实时音视频·视频编解码·视频
VidDown7 天前
显卡处理视频技术详解：从硬解码到 NVENC，GPU 如何让视频处理起飞？
javascript·编辑器·音视频·视频编解码·视频
2601_956743687 天前
2026 上海小程序开发甄选：源码、云函数、跨端兼容技术评判
小程序·开发经验·上海
IT_张三7 天前
CSDN-项目分享-暑期备考小程序
小程序
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？03【AI】2026 年具身智能模型和世界模型总结042026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析06GitHub 镜像站点07【AI总结】2026年6月 主流国内外大模型总结08AI科技热点日报 | 2026年6月1日09AI科技热点日报 | 2026年6月22日10AI一周事件 · 2026-06-03 至 2026-06-09