导航：首页 > 开发技术 >

微信小程序视频组件库video怎么使用

发表于：2025-11-07 作者：千家信息网编辑

千家信息网最后更新 2025年11月07日，这篇文章主要讲解了"微信小程序视频组件库video怎么使用"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"微信小程序视频组件库video怎么使用"吧！v

千家信息网最后更新 2025年11月07日微信小程序视频组件库video怎么使用

这篇文章主要讲解了"微信小程序视频组件库video怎么使用"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"微信小程序视频组件库video怎么使用"吧！

video

视频。

属性名	类型	默认值	说明	最低版本
src	String		要播放视频的资源地址
duration	Number		指定视频时长	1.1.0
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmu-list	Object Array		弹幕列表
danmu-btn	Boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu	Boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放	1.4.0
muted	Boolean	false	是否静音播放	1.4.0
bindplay	EventHandle		当开始/继续播放时触发play事件
bindpause	EventHandle		当暂停播放时触发 pause 事件
bindended	EventHandle		当播放到末尾时触发 ended 事件
bindtimeupdate	EventHandle		播放进度变化时触发，event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次
bindfullscreenchange	EventHandle		当视频进入和退出全屏是触发，event.detail = {fullScreen: '当前全屏状态'}	1.4.0
objectFit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效

video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

示例代码：

function getRandomColor () {  let 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: function (res) {this.videoContext = wx.createVideoContext('myVideo')  },  inputValue: '',    data: {        src: '',    danmuList: [      {        text: '第 1s 出现的弹幕',        color: '#ff0000',        time: 1  },      {        text: '第 3s 出现的弹幕',        color: '#ff00ff',        time: 3}]    },  bindInputBlur: function(e) {this.inputValue = e.detail.value  },  bindButtonTap: function() {var that = thiswx.chooseVideo({      sourceType: ['album', 'camera'],      maxDuration: 60,      camera: ['front','back'],      success: function(res) {        that.setData({          src: res.tempFilePath        })      }    })  },  bindSendDanmu: function () {this.videoContext.sendDanmu({      text: this.inputValue,      color: getRandomColor()    })  }})