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哈哈~
 
 

微信小程序之----制作视频弹幕的更多相关文章

  1. 微信小程序在线制作 自己制作微信小程序

    小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...

  2. 微信小程序首支视频广告片发布

    自2017年1月9日上线以来,微信小程序瞬间引爆网络,又迅速归于平静.对这个“无需安装.触手可及.用完即走.无需卸载”的小程序,微信从一开始就对它寄予了无限期望.在公布一系列规则更改后,微信小程序终于 ...

  3. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  4. 微信小程序,制作属于自己的Icon图标

    前言 最近在接手一个微信小程序,发现里面的图标都是使用的image组件,看起来非常别扭,加载也不太顺畅. 就想着看看微信有没有类似自带的图标库可以使用. 有是有,就是太少了,翻来翻去好像也就 8 种, ...

  5. 微信小程序-从零开始制作一个跑步微信小程序

    来源:伯乐在线 - 王小树 链接:http://ios.jobbole.com/90603/ 点击 → 申请加入伯乐在线专栏作者 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册 ...

  6. 微信小程序wxss制作扭蛋机

    小程序制作扭蛋机 2019-09-24 13:26:53 公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能.在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题).最后还是自己做一个吧 ...

  7. 微信小程序实现滚动视频自动播放(未优化)

    先看看大概效果 1.首先需要了解微信API:          wx.createIntersectionObserver(Object component, Object options) 创建并返 ...

  8. 微信小程序上传图片,视频及预览

    wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...

  9. 微信小程序(9)--音频及视频弹幕

    记录微信小程序音频及视频弹幕播放效果. 1.audio <!-- audio.wxml --> <audio poster="{{poster}}" name=& ...

随机推荐

  1. django中多个app放入同一文件夹apps

    开发IDE:pycharm 新建一个apps文件夹 需要整理的app文件夹拖到同一个文件夹中,即apps.(弹出对话框,取消勾选Search for references) 在pycharm 中,右键 ...

  2. SVN远程管理

    1.使用远程桌面连接工具,分别填写连接地址和用户名进行连接 2.紧接着进行安全登录. 3.打开VisualSVN Server Manager工具进行显示已经拥有的项目和分配好的群组管理. 这样子就可 ...

  3. TSP-UK49687

    Copied From:http://www.math.uwaterloo.ca/tsp/uk/index.html Shortest possible tour to nearly every pu ...

  4. IIS6.0+win2003部署MVC网站的一些问题

    安装iis,framework环境不谈.MVC网站部署 步骤: 1.为程序新建一个应用程序池(将default的那个程序池作为模板就可以了) 2.web服务扩展一些启用一些必要的服务 3.新建网站 描 ...

  5. Scrapy实战篇(三)之爬取豆瓣电影短评

    今天的主要内容是爬取豆瓣电影短评,看一下网友是怎么评价最近的电影的,方便我们以后的分析,以以下三部电影:二十二,战狼,三生三世十里桃花为例. 由于豆瓣短评网页比较简单,且不存在动态加载的内容,我们下面 ...

  6. MySQL架构之 主从+ProxySQL实现读写分离

    准备服务器: docker run -d --privileged -v `pwd`/mysql_data:/data -p 3001:3306 --name mysql5-master --host ...

  7. Scrum Meeting 博客目录

    秘制牛肉团队 Scrum Meeting 博客汇总 一.Alpha阶段 团队第一次 # scrum meeting 团队第二次 # scrum meeting 团队第三次 # scrum meetin ...

  8. Ajax的异步与同步(async)

    1.async值为true (异步)当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说 ...

  9. ORA-03137: TTC 协议内部错误: [12333] [4] [49] [51] [] [] [] []

    [1]问题背景:Oracle数据库版本为11.2.0.1,操作系统CentOS release 5.9,详细的报错信息如下: Dump file /data/oracle/diag/rdbms/db0 ...

  10. win10 linux 子系统 所在 目录

    C:\Users\用户名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\r ...