本文整理自网络，侵删。
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" rel="external nofollow" 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()
})
}
})标签：微信小程序
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
