index.wxml

    1. <view class="maxWidth">
    2.   <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls enable-danmu danmu-btn 
    3.   danmu-list="{{danmuList}}" style="width: 100%;" id="videoTest"></video>
    4. </view>
    6. <view>
    7.   <input  type="text" placeholder="请输入弹幕" bindblur="bindInputblur" class="inputStyle" value="{{content}}"/>
    8.   <button type = "primary" bindtap="bindSendDanmu">发送弹幕</button>
    10.   <block wx:for="{{danmuList}}">
    11.   <text>{{item.text}} \n</text>
    12.   </block>
    13. </view>

    index.js

    1. // index.js
    2. // 获取应用实例
    3. const app = getApp()
    5. Page({
    6.   videoContext:null,
    7.   inputValue:'',
    9.   onReady(){
    10.       this.videoContext = wx.createVideoContext('videoTest')
    11.   },
    13.   data:{
    14.     danmuList:[
    15.       {text:'测试'}
    16.     ],
    17.     content:''
    18.   },
    20.   bindInputblur(e){
    21.       this.data.inputValue = e.detail.value
    22.   },
    23.   bindSendDanmu(){
    24.     this.setData({
    25.       danmuList:this.data.danmuList.concat({
    26.         text:this.data.inputValue
    27.       }),
    28.       content:''
    29.     })
    31.     this.videoContext.sendDanmu({
    32.       text:this.data.inputValue,
    33.       color:'#FF0000'
    34.     })
    35.     console.log(this.data.danmuList);
    36.   }
    37. })