uni.createVideoContext(videoId, this)

创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√x√√

videoContext 对象的方法列表

方法参数说明
play无播放
pause无暂停
seekposition跳转到指定位置，单位 s
stop停止视频，仅微信小程序平台支持，规范详情
sendDanmudanmu发送弹幕，danmu 包含两个属性 text, color
playbackRaterate设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5
requestFullScreen无进入全屏，可传入{direction}参数，详见 video 组件文档
exitFullScreen无退出全屏
showStatusBar无显示状态栏，仅在iOS全屏下有效
hideStatusBar无隐藏状态栏，仅在iOS全屏下有效

示例

  1. <template>
  2.     <view>
  3.         <view class="page-body">
  4.             <view class="page-section">
  5.                 <video id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" @error="videoErrorCallback" :danmu-list="danmuList"
  6.                     enable-danmu danmu-btn controls></video>
  8.                 <view class="uni-list">
  9.                     <view class="uni-list-cell">
  10.                         <view>
  11.                             <view class="uni-label">弹幕内容</view>
  12.                         </view>
  13.                         <view class="uni-list-cell-db">
  14.                             <input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
  15.                         </view>
  16.                     </view>
  17.                 </view>
  18.                 <view class="btn-area">
  19.                     <button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
  20.                 </view>
  21.             </view>
  22.         </view>
  23.     </view>
  24. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             title: 'video',
  5.             src: '',
  6.             inputValue: '',
  7.             danmuList: [{
  8.                     text: '第 1s 出现的弹幕',
  9.                     color: '#ff0000',
  10.                     time: 1
  11.                 },
  12.                 {
  13.                     text: '第 3s 出现的弹幕',
  14.                     color: '#ff00ff',
  15.                     time: 3
  16.                 }
  17.             ]
  18.         }
  19.     },
  20.     onReady: function (res) {
  21.         this.videoContext = uni.createVideoContext('myVideo')
  22.     },
  23.     methods: {
  24.         bindInputBlur: function (e) {
  25.             this.inputValue = e.target.value
  26.         },
  27.         bindButtonTap: function () {
  28.             var that = this
  29.             uni.chooseVideo({
  30.                 sourceType: ['album', 'camera'],
  31.                 maxDuration: 60,
  32.                 camera: ['front', 'back'],
  33.                 success: function (res) {
  34.                     this.src = res.tempFilePath
  35.                 }
  36.             })
  37.         },
  38.         bindSendDanmu: function () {
  39.             this.videoContext.sendDanmu({
  40.                 text: this.inputValue,
  41.                 color: this.getRandomColor()
  42.             })
  43.         },
  44.         videoErrorCallback: function (e) {
  45.             console.log('视频错误信息:')
  46.             console.log(e.target.errMsg)
  47.         },
  48.         getRandomColor: function () {
  49.             const rgb = []
  50.             for (let i = 0; i < 3; ++i) {
  51.                 let color = Math.floor(Math.random() * 256).toString(16)
  52.                 color = color.length == 1 ? '0' + color : color
  53.                 rgb.push(color)
  54.             }
  55.             return '#' + rgb.join('')
  56.         }
  57.     }
  58. }

发现错误？想参与编辑？在 GitHub 上编辑此页面！