1.视频播放器

2.选择弹幕颜色

3.弹幕来了...

一般微信小程序需要配置.wxml、wxss、js、json文件，所有接下来也是要配置这几个文件，请看下图：

第一:  index.wxml

  1. <!--index.wxml-->
  2. <view class="section tc">
  3.   <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>
  4.   </video>
<!-- //enable-danmu 是否展示弹幕 默认值为false
//danmu-btn 是否显示弹幕按钮 默认值为false
//controls 是否显示默认的播放控件（播放/暂停按钮、播放进度、时间） -->
  1.   <!-- 输入弹幕的信息 -->
  2.   <view class="btn-area">
  3.      <view class="weui-cell weui-cell_input">
  4.                 <view class="weui-cell__bd">
  5.                     <input class="weui-input" placeholder="请输入弹幕" bindblur="bindInputBlur" />
  6.                 </view>
  7.       </view>
  8.  
  9.     <button style="margin:30rpx;" bindtap="bindSendDanmu">发送弹幕</button>
  10.   </view>
  11.  
  12.   <!-- 随机选择发送弹幕的字体的颜色 -->
  13. </view>
  14.       <view class="weui-cells weui-cells_after-title">
  15.             <view class="weui-cell weui-cell_switch">
  16.                 <view class="weui-cell__bd">随机颜色</view>
  17.                 <view class="weui-cell__ft">
  18.                     <switch checked bindchange="switchChange" />
  19.                 </view>
  20.    </view>
  21. </view>
  22.  
  23.   <!-- 选择发送弹幕的字体的颜色 -->
  24. <view class="colorstyle"  bindtap="selectColor">
  25. <text>选择颜色</text>
  26. <view style="height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}"></view>
  27. </view>

第二步：index.wxss

  1. /**index.wxss**/
  2. .weui-cells {
  3.   position: relative;
  4.   margin-top: 1.17647059em;
  5.   background-color: #FFFFFF;
  6.   line-height: 1.41176471;
  7.   font-size: 17px;
  8. }
  9. .weui-cells:before {
  10.   content: " ";
  11.   position: absolute;
  12.   left: 0;
  13.   top: 0;
  14.   right: 0;
  15.   height: 1px;
  16.   border-top: 1rpx solid #D9D9D9;
  17.   color: #D9D9D9;
  18.  
  19. }
  20. .weui-cells:after {
  21.   content: " ";
  22.   position: absolute;
  23.   left: 0;
  24.   bottom: 0;
  25.   right: 0;
  26.   height: 1px;
  27.   border-bottom: 1rpx solid #D9D9D9;
  28.   color: #D9D9D9;
  29. }
  30. .weui-cells_after-title {
  31.   margin-top: 0;
  32. }
  33. .weui-cell__bd {
  34.   -webkit-box-flex: 1;
  35.   -webkit-flex: 1;
  36.           flex: 1;
  37. }
  38. .weui-cell__ft {
  39.   text-align: right;
  40.   color: #999999;
  41. }
  42.  
  43. .weui-cell {
  44.   padding: 10px 10px;
  45.   position: relative;
  46.   display: -webkit-box;
  47.   display: -webkit-flex;
  48.   display: flex;
  49.   -webkit-box-align: center;
  50.   -webkit-align-items: center;
  51.           align-items: center;
  52. }
  53. .weui-cell:before {
  54.   content: " ";
  55.   position: absolute;
  56.   top: 0;
  57.   right: 0;
  58.   height: 1px;
  59.   border-top: 1rpx solid #D9D9D9;
  60.   color: #D9D9D9;
  61.   left: 15px;
  62. }
  63. .weui-cell:first-child:before {
  64.   display: none;
  65. }
  66. .colorstyle{
  67.     border-top: 2px solid #eee;
  68.     border-bottom: 2px solid #eee;
  69.     padding-left: 10px;
  70.     padding-right: 10px;
  71.     font-size: 17px;
  72.     line-height: 100rpx;
  73.     display: flex;
  74.     flex-direction: row;
  75.     justify-content:space-between;
  76. }

第三步：index.js(最重要）

  1. Page({
  2.   inputValue: '', //保存输入框的值
  3.   data: {
  4.     isRandomColor: true,//默认随机
  5.     src: '',
  6.     numberColor: "#ff0000",//默认黑色
  7.  
  8.     danmuList: [
  9.       {
  10.         text: '第 1s 出现的红色弹幕',
  11.         color: '#ff0000',
  12.         time: 1
  13.       },
  14.       {
  15.         text: '第 2s 出现的绿色弹幕',
  16.         color: '#00ff00',
  17.         time: 2
  18.       }
  19.     ]
  20.   },
  21.   onLoad: function () {
  22.     var _this = this;
  23.     //获取屏幕宽高
  24.     wx.getSystemInfo({
  25.       success: function (res) {
  26.         var windowWidth = res.windowWidth;
  27.         //video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。
  28.         var videoHeight = (225 / 300) * windowWidth//屏幕高宽比
  29.         console.log('videoWidth: ' + windowWidth)
  30.         console.log('videoHeight: ' + videoHeight)
  31.         _this.setData({
  32.           videoWidth: windowWidth,
  33.           videoHeight: videoHeight
  34.         })
  35.       }
  36.     })
  37.   },
  38.   onReady: function (res) {
  39.    // 使用 wx.createVideoContext 获取 video 标签上下文 context
  40.     this.videoContext = wx.createVideoContext('myVideo')
  41.   },
  42.  
  43.   //判断是弹幕的颜色是随机的还是选择的
  44.   bindSendDanmu: function () {
  45.     if (this.data.isRandomColor) {
  46.       var color = getRandomColor();
  47.     } else {
  48.       var color = this.data.numberColor;
  49.     }
  50.  
  51.     this.videoContext.sendDanmu({
  52.       text: this.inputValue,
  53.       color: color
  54.     })
  55.   },
  56.   //视频错误回调的时候
  57.   videoErrorCallback: function (e) {
  58.     console.log('视频错误信息:')
  59.     console.log(e.detail.errMsg)
  60.   },
  61.  
  62.   //选择颜色页面
  63.   selectColor: function () {
  64.     wx.navigateTo({
  65.       url: '../selectColor/selectColor',
  66.       success: function (res) {
  67.         // success
  68.       },
  69.       fail: function () {
  70.         // fail
  71.       },
  72.       complete: function () {
  73.         // complete
  74.       }
  75.     })
  76.   },
  77.   //switch是否选中
  78.   switchChange: function (e) {
  79.     this.setData({
  80.       isRandomColor: e.detail.value //获取到页面输入框填写的值
  81.     })
  82.   },
  83.  
  84.   //把输入框的值取出来
  85.     bindInputBlur: function (e) {
  86.     this.inputValue = e.detail.value
  87.   },
  88.   onShow: function () {
  89.     var _this = this;
  90.     //从缓存中获取颜色
  91.     wx.getStorage({
  92.       key: 'numberColor',
  93.       success: function (res) {
  94.         console.log(res.data + "numberColor----")
  95.         _this.setData({
  96.           numberColor: res.data,
  97.         })
  98.       }
  99.     })
  100.   },
  101. })
  102.  
  103. //随机产生一个颜色
  104. function getRandomColor() {
  105.   let rgb = []
  106.   for (let i = 0; i < 3; ++i) {
  107.     let color = Math.floor(Math.random() * 256).toString(16)
  108.     color = color.length == 1 ? '0' + color : color
  109.     rgb.push(color)
  110.   }
  111.   return '#' + rgb.join('')
  112. }

第四步：创建一个selectColor 网页（page）

selectColor.wxml

  1. <span style="font-size:24px;"><!--selectColor.wxml-->
  2. <view class="page">
  3.     <view class="page__bd">
  4.         <view class="weui-grids">
  5.             <block wx:for-items="{{color}}"  >
  6.                 <view  class="weui-grid"  data-number="{{item.number}}" bindtap="selectColor" >
  7.                     <view class="weui-grid__icon"  style="background:{{item.number}}"/>
  8.                 </view>
  9.             </block>
  10.         </view>
  11.     </view>
  12. </view></span>

selectColor.wxss

  1. /**selectColor.wxss**/
  2. .weui-grids {
  3.   border-top: 1rpx solid #D9D9D9;
  4.   border-left: 1rpx solid #D9D9D9;
  5. }
  6. .weui-grid {
  7.   position: relative;
  8.   float: left;
  9.   padding: 20rpx 20rpx;
  10.   width: 20%;
  11.   box-sizing: border-box;
  12.   border-right: 1rpx solid #D9D9D9;
  13.   border-bottom: 1rpx solid #D9D9D9;
  14. }
  15. .weui-grid_active {
  16.   background-color: #ccc;
  17. }
  18. .weui-grid__icon {
  19.   display: block;
  20.   width: 100rpx;
  21.   height: 100rpx;
  22.   margin: 0 auto;
  23.  box-shadow: 3px 3px 5px #bbb;
  24.  
  25. }
  26. .weui-grid__label {
  27.   margin-top: 5px;
  28.   display: block;
  29.   text-align: center;
  30.   color: #000000;
  31.   font-size: 14px;
  32.   white-space: nowrap;
  33.   text-overflow: ellipsis;
  34.   overflow: hidden;
  35. }

selectColor.js

  1. //selectColor.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     color: [
  7.       { key: 1, color: ' 白色 ', number: '#FFFFFF' },
  8.  
  9.       { key: 2, color: ' 红色 ', number: '#FF0000' },
  10.  
  11.       { key: 3, color: ' 绿色 ', number: '#00FF00' },
  12.  
  13.       { key: 4, color: ' 蓝色 ', number: '#0000FF' },
  14.  
  15.       { key: 5, color: ' 牡丹红 ', number: '#FF00FF' },
  16.  
  17.       { key: 6, color: ' 青色 ', number: '#00FFFF' },
  18.  
  19.       { key: 7, color: ' 黄色 ', number: '#FFFF00' },
  20.  
  21.       { key: 8, color: ' 黑色 ', number: '#000000' },
  22.  
  23.       { key: 9, color: ' 海蓝 ', number: '#70DB93' },
  24.  
  25.       { key: 10, color: ' 巧克力色 ', number: '#5C3317' },
  26.  
  27.       { key: 11, color: ' 蓝紫色 ', number: '#9F5F9F' },
  28.  
  29.       { key: 12, color: ' 黄铜色 ', number: '#B5A642' },
  30.  
  31.       { key: 13, color: ' 亮金色 ', number: '#D9D919' },
  32.  
  33.       { key: 14, color: ' 棕色 ', number: '#A67D3D' },
  34.  
  35.       { key: 15, color: ' 青铜色 ', number: '#8C7853' },
  36.  
  37.       { key: 16, color: ' 2号青铜色 ', number: '#A67D3D' },
  38.  
  39.       { key: 17, color: ' 士官服蓝色 ', number: '#5F9F9F' },
  40.  
  41.       { key: 18, color: ' 冷铜色 ', number: '#D98719' },
  42.  
  43.       { key: 19, color: ' 铜色 ', number: '#B87333' },
  44.  
  45.       { key: 20, color: ' 珊瑚红 ', number: '#FF7F00' },
  46.  
  47.       { key: 21, color: ' 紫蓝色 ', number: '#42426F' },
  48.  
  49.       { key: 22, color: ' 深棕 ', number: '#5C4033' },
  50.  
  51.       { key: 23, color: ' 深绿 ', number: '#2F4F2F' },
  52.  
  53.       { key: 24, color: ' 深铜绿色 ', number: '#4A766E' },
  54.  
  55.       { key: 25, color: ' 深橄榄绿 ', number: '#4F4F2F' },
  56.  
  57.       { key: 26, color: ' 深兰花色 ', number: '#9932CD' },
  58.  
  59.       { key: 27, color: ' 深紫色 ', number: '#871F78' },
  60.  
  61.       { key: 28, color: ' 深石板蓝 ', number: '#6B238E' },
  62.  
  63.       { key: 29, color: ' 深铅灰色 ', number: '#2F4F4F' },
  64.  
  65.       { key: 30, color: ' 深棕褐色 ', number: '#97694F' },
  66.  
  67.       { key: 32, color: ' 深绿松石色 ', number: '#7093DB' },
  68.  
  69.       { key: 33, color: ' 暗木色 ', number: '#855E42' },
  70.  
  71.       { key: 34, color: ' 淡灰色 ', number: '#545454' },
  72.  
  73.       { key: 35, color: ' 土灰玫瑰红色 ', number: '#856363' },
  74.  
  75.       { key: 36, color: ' 长石色 ', number: '#D19275' },
  76.  
  77.       { key: 37, color: ' 火砖色 ', number: '#8E2323' },
  78.  
  79.       { key: 38, color: ' 森林绿 ', number: '#238E23' },
  80.  
  81.       { key: 39, color: ' 金色 ', number: '#CD7F32' },
  82.  
  83.       { key: 40, color: ' 鲜黄色 ', number: '#DBDB70' },
  84.  
  85.       { key: 41, color: ' 灰色 ', number: '#C0C0C0' },
  86.  
  87.       { key: 42, color: ' 铜绿色 ', number: '#527F76' },
  88.  
  89.       { key: 43, color: ' 青黄色 ', number: '#93DB70' },
  90.  
  91.       { key: 44, color: ' 猎人绿 ', number: '#215E21' },
  92.  
  93.       { key: 45, color: ' 印度红 ', number: '#4E2F2F' },
  94.  
  95.       { key: 46, color: ' 土黄色 ', number: '#9F9F5F' },
  96.  
  97.       { key: 47, color: ' 浅蓝色 ', number: '#C0D9D9' },
  98.  
  99.       { key: 48, color: ' 浅灰色 ', number: '#A8A8A8' },
  100.  
  101.       { key: 49, color: ' 浅钢蓝色 ', number: '#8F8FBD' },
  102.  
  103.       { key: 59, color: ' 浅木色 ', number: '#E9C2A6' },
  104.  
  105.       { key: 60, color: ' 石灰绿色 ', number: '#32CD32' },
  106.  
  107.       { key: 61, color: ' 桔黄色 ', number: '#E47833' },
  108.  
  109.       { key: 62, color: ' 褐红色 ', number: '#8E236B' },
  110.  
  111.       { key: 63, color: ' 中海蓝色 ', number: '#32CD99' },
  112.  
  113.       { key: 64, color: ' 中蓝色 ', number: '#3232CD' },
  114.  
  115.       { key: 65, color: ' 中森林绿 ', number: '#6B8E23' },
  116.  
  117.       { key: 66, color: ' 中鲜黄色 ', number: '#EAEAAE' },
  118.  
  119.       { key: 67, color: ' 中兰花色 ', number: '#9370DB' },
  120.  
  121.       { key: 68, color: ' 中海绿色 ', number: '#426F42' },
  122.  
  123.       { key: 69, color: ' 中石板蓝色 ', number: '#7F00FF' },
  124.  
  125.       { key: 70, color: ' 中春绿色 ', number: '#7FFF00' },
  126.  
  127.       { key: 71, color: ' 中绿松石色 ', number: '#70DBDB' },
  128.  
  129.       { key: 72, color: ' 中紫红色 ', number: '#DB7093' },
  130.  
  131.       { key: 73, color: ' 中木色 ', number: '#A68064' },
  132.  
  133.       { key: 74, color: ' 深藏青色 ', number: '#2F2F4F' },
  134.  
  135.       { key: 75, color: ' 海军蓝 ', number: '#23238E' },
  136.  
  137.       { key: 76, color: ' 霓虹篮 ', number: '#4D4DFF' },
  138.  
  139.       { key: 77, color: ' 霓虹粉红 ', number: '#FF6EC7' },
  140.  
  141.       { key: 78, color: ' 新深藏青色 ', number: '#00009C' },
  142.  
  143.       { key: 79, color: ' 新棕褐色 ', number: '#EBC79E' },
  144.  
  145.       { key: 80, color: ' 暗金黄色 ', number: '#CFB53B' },
  146.  
  147.       { key: 81, color: ' 橙色 ', number: '#FF7F00' },
  148.     ],
  149.   },
  150.  
  151.   onLoad: function () {
  152.  
  153.   },
  154.   //点击后关闭选色页面
  155.   selectColor: function (e) {
  156.     var number = e.currentTarget.dataset.number; //获取当前选择的颜色
  157.     console.log("number: " + number)
  158.     try {
  159.       wx.setStorageSync('numberColor', number)
  160.     } catch (e) {
  161.     }
  162.     wx.navigateBack({
  163.       delta: 1, // 回退前 delta(默认为1) 页面
  164.       success: function (res) {
  165.         // success
  166.       },
  167.       fail: function () {
  168.         // fail
  169.       },
  170.       complete: function () {
  171.         // complete
  172.       }
  173.     })
  174.   }
  175. })

然后再app.json中配置selectColor页面

这就大功告成，欢迎各位来吐槽！！！

微信小程序-视频弹幕的项目的更多相关文章

  1. 微信小程序视频地址

    微信小程序视频系列教程完整版,课程中用到的源码附在帖子最后. [url=http://bbs.larkapp.com/forum.php?mod=viewthread&tid=5673][b] ...

  2. 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...

  3. 微信小程序转化为uni-app项目

    前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及其的符合我的需求.那么问题 ...

  4. 微信小程序-云开发-实战项目

    微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...

  5. 微信小程序创建一个新项目

    1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...

  6. 微信小程序+PHP：动态显示项目倒计时（格式：4天7小时58分钟39秒）

    1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p class="endtime_act">距报名截止还有: <block ...

  7. 解决微信小程序视频组件层级过高的问题

    本文首发于我的个人博客:http://www.fogcrane.org 前言 在微信小程序的开发中,总有一些"VIP"组件,他们的层级,高得让人抓狂,总是凌驾于很多其他低层级组件之 ...

  8. 微信小程序 视频 组件

    video 组件 视频组件 相关的api :wx.createVideoContext 支持的格式: 支持的编码格式 video 组件的属性: src:类型 字符串 必填 要播放视频的资源地址 (支持 ...

  9. 2、微信小程序之弹幕的实现（无后台）

    对弹幕功能主要利用环信来实现的,读者也许对环信这个东西很陌生,请先自行了解这环信再来看这文章. 环信开发文档:http://docs.easemob.com/im/400webimintegratio ...

随机推荐

  1. Task Scheduler Error Message: 80041318

    Using the error lookup tool that comes with VC++ (errlook.exe, or "Error Lookup" on the To ...

  2. 【Django】runserver 0.0.0.0:0 后，究竟发生了什么

    WSGI协议 Django是遵循WSGI协议设计的 WSGI协议主要包括server和application两个部分: WSGI server:负责从客户端接收请求,将request转发给applic ...

  3. Scala教程之:Future和Promise

    文章目录 定义返回Future的方法 阻塞方式获取Future的值 非阻塞方式获取Future的值 Future链 flatmap VS map Future.sequence() VS Future ...

  4. Springboot以Jetty为容器实现http重定向到https

    1 简介 之前讲解的Springboot整合https用的是tomcat作为容器,tomcat也是一个流行多年的老牌Java容器了.但针对不同的场景,还是会有不同的选择,如Jetty.Jetty是架构 ...

  5. JQuery学习(一)

    本文是学习廖老师的Javascript全栈教程后的一些笔记. 使用jQuery: 方法一:下载jQuery库,并在html页面中引入,方式如下: 1 <html> 2 <head&g ...

  6. qcow2快照原理

    关键术语:cluster 一个Qcow2 img文件由固定大小的单元组成,该单元称为cluster,默认大小为65536bytes/64Ksector 数据块读写的最小单元,大小为512字节host ...

  7. Xftp的下载安装，以及如何使用XFtp连接虚拟主机/服务器

    1.下载ftp软件  下载地址: 点我立即下载 2.下载后双击安装  下一步  选择Free for Home/School   然后其他的默认下一步即可 3.打开之前领取的免费一年虚拟主机的网址,登 ...

  8. java程序猿面试系列之jvm专题

    前言 因为疫情的影响,现在都变成金五银六了.为了方便大家,在此开一个程序猿面试系列.总结各大公司所问的问题,希望能够帮助到大家,适合初中级java程序猿阅读. 1. Java类实例化时,JVM执行顺序 ...

  9. Java采用反射技术创建对象后对目标类的成员变量和成员方法进行访问

    实现: package com.ljy; import java.lang.reflect.Field; import java.lang.reflect.Method; /** * * @Class ...

  10. Composition API

    介绍 Composition API的主要思想是,我们将它们定义为从新的 setup 函数返回的JavaScript变量,而不是将组件的功能(例如state.method.computed等)定义为对 ...