小程序——视频

吴声子夜歌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)
  }
})
相关推荐
硅谷秋水1 天前
EgoSteer：一种基于第一人称视角视频、实现可控灵巧操作的全栈系统
深度学习·机器学习·语言模型·机器人·音视频
波罗丁牌2 天前
uni-app 实现视频聊天、屏幕分享，支持Android、HarmonyOS、iOS
android·uni-app·音视频
黄华SJ520it2 天前
二二复制定点裂变双轨商城系统开发：原理、架构与实战指南
运维·小程序·架构·系统开发
不爱记笔记2 天前
视频转PPT工具测评：通义听悟、Ai好记、讯飞听见谁更懂画面信息？
人工智能·powerpoint·音视频
小码哥0682 天前
2026陪诊小程序与APP开发技术分析
大数据·人工智能·小程序
2601_961681302 天前
河南AI短视频哪个好
音视频
WA内核拾荒者2 天前
WhatsApp 富媒体消息（图片/视频）的发送优化与压缩策略
php·音视频·媒体
汪2 天前
使用ffmpeg将mp4视频转为m3u8格式
android·ffmpeg·音视频
00后程序员张2 天前
使用Instruments工具深入分析iOS应用性能与启动时间优化
android·macos·ios·小程序·uni-app·cocoa·iphone
程序喵大人2 天前
【C++进阶】STL容器与迭代器 - 10 把容器、迭代器和数据流串成一个小程序
开发语言·c++·容器·小程序·迭代器·stl
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路05Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片0900 Debian字符界面如何支持中文10历年考研数学一、数学二、数学三真题试卷及答案PDF