codecamp

微信小程序API 视频·VideoContext

VideoContext

VideoContext 实例,可通过 wx.createVideoContext 获取。

VideoContext 通过 id 跟一个 video 组件绑定,操作对应的 video 组件。

方法:

VideoContext.exitFullScreen()

基础库 1.4.0 开始支持,低版本需做兼容处理。

退出全屏

VideoContext.exitPictureInPicture(Object object)

退出小窗,该方法可在任意页面调用

参数

Object object

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

VideoContext.hideStatusBar()

基础库 2.1.0 开始支持,低版本需做兼容处理。

隐藏状态栏,仅在iOS全屏下有效

VideoContext.pause()

暂停视频

VideoContext.play()

播放视频

VideoContext.playbackRate(number rate)

基础库 1.4.0 开始支持,低版本需做兼容处理。

设置倍速播放

参数

number rate

倍率,支持 0.5/0.8/1.0/1.25/1.5,2.6.3 起支持 2.0 倍速

VideoContext.requestFullScreen(Object object)

基础库 1.4.0 开始支持,低版本需做兼容处理。

进入全屏。若有自定义内容需在全屏时展示,需将内容节点放置到 video 节点内。

参数

Object object

属性 类型 默认值 必填 说明 最低版本
direction number 设置全屏时视频的方向,不指定则根据宽高比自动判断。 1.7.0

object.direction 的合法值

说明 最低版本
0 正常竖向
90 屏幕逆时针90度
-90 屏幕顺时针90度

VideoContext.seek(number position)

跳转到指定位置

参数

number position

跳转到的位置,单位 s

VideoContext.sendDanmu(Object data)

发送弹幕

参数

Object data

弹幕内容

属性 类型 默认值 必填 说明
text string 弹幕文字
color string 弹幕颜色

VideoContext.showStatusBar()

基础库 2.1.0 开始支持,低版本需做兼容处理。

显示状态栏,仅在iOS全屏下有效

VideoContext.stop()

基础库 1.7.0 开始支持,低版本需做兼容处理。

停止视频

示例代码

在开发者工具中预览效果

<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>

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 (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  bindInputBlur (e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})


微信小程序API 视频·拍摄或相册中选择图片或视频
微信小程序API 音频·结束播放
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }