微信小程序教程
7.3.9 视频组件控制
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

概述

网络

媒体

视频

音频组件控制

背景音播放管理

音乐播放控制

音频播放控制

录音管理

录音

图片

视频组件控制

wx.createVideoContext(videoId, this)

wx.createVideoContext(videoId, this) 方法创建并返回 video 上下文videoContext对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内<video/>组件。

videoContext通过 videoId 跟一个 video 组件绑定,通过它可以操作一个 video 组件。

videoContext 对象的方法列表:

方法 参数 说明 最低版本
play 播放
pause 暂停
seek position 跳转到指定位置,单位 s
sendDanmu danmu 发送弹幕,danmu 包含两个属性 text, color。
playbackRate rate 设置倍速播放,支持的倍率有 0.5/0.8/1.0/1.25/1.5 1.4.0
requestFullScreen 进入全屏,可传入{direction}参数(1.7.0起支持),详见video组件文档 1.4.0
exitFullScreen 退出全屏 1.4.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: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验