微信小程序之----製做視頻彈幕

1. 文件目錄

    使用微信， 長度單位使用 rpx 能夠避免不一樣設備的樣式調試問題

    經驗總結，以前一直使用px ,發現換了測試機就崩了

      

2. index.wxml頁面設置video控件

     <video id="myVideo" style="height:{{videoHeight}}px;width:{{videoWidth}}px" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?       filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"       binderror="videoErrorCallback"

     danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>

     參數 danmu-list 設置 彈出彈幕數據來源

      controls 視頻播放時的控制按鈕

 

    設置要播放的視頻所佔的屏幕大小

    var _this = this;

    //獲取屏幕寬高

    wx.getSystemInfo({

    success: function (res) {

    var windowWidth = res.windowWidth;

     //video標籤認寬度300px、高度225px，設置寬高須要經過wxss設置width和 height。

   var videoHeight = (225 / 300) * windowWidth//屏幕高寬比

   console.log('videoWidth: ' + windowWidth)

   console.log('videoHeight: ' + videoHeight)

   _this.setData({

     videoWidth: windowWidth,

    videoHeight: videoHeight

      })

    }

    })

 

 

使用video 插件，設置插件必要的參數

danmulist =>page.data 直接設置後在屏幕顯示

enable_danmu 是否開啓彈幕

danmu-btn 是否顯示彈幕按鈕

controls 是否顯示播放插件

 

 

     3.在wxml頁面增長 輸入 發送彈幕功能

     <view class="btn-area">

    <view class="weui-cell weui-cell_input">

    <view class="weui-cell__bd">

    <input class="weui-input" placeholder="請輸入彈幕" bindblur="bindInputBlur" />

    </view>

    </view>

    <button style="margin:30rpx;" bindtap="bindSendDanmu" > 發送彈幕</button>

   </view>

    </view>

 

    js 頁面負責邏輯處理參數設置

     bindInputBlur: function (e) {

    this.inputValue = e.detail.value

   },

  bindSendDanmu: function () {

    if (this.data.isRandomColor) {

    var color = getRandomColor();

    } else {

   var color = this.data.numberColor;

  }

 

//主要方法，直接調用 便可完成發送彈幕功能

this.videoContext.sendDanmu({

    text: this.inputValue,

   color: color

})

},

 

 

加載錯誤時的函數 主要用於調試

videoErrorCallback: function (e) {

console.log('視頻錯誤信息:')

console.log(e.detail.errMsg)

},

 

 

 

 

  最後打開支付寶首頁搜「522158734」領紅包，領到大紅包的小夥伴趕忙使用哦！

O(∩_∩)O哈哈~