• uni.createVideoContext(videoId, this)

    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 上编辑此页面！