正文

微信小程序之----制作视频弹幕

IP云
IP云V管理员/7 阅读
08/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
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)
},
 
 
 
 
 最后打开支付宝首页搜“”领红包，领到大红包的小伙伴赶紧使用哦！
O(∩_∩)O哈哈~