微信小程序视频弹幕发送功能的实现


Posted in Javascript onDecember 28, 2020

1. 目录结构

微信小程序视频弹幕发送功能的实现

2. videoDanmu

<!-- 视频区域 -->
<video src="{{src}}"
id='video'
danmu-btn
enable-danmu
danmu-list="{{ danmuList }}"
>
</video>

<!-- 弹幕发送区域 -->
<view class='sendDanmu'>
  <textarea name="" id="" cols="30" rows="10" placeholder="请输入弹幕"
  bindinput="handleDanmuContent" 
  ></textarea>
  <button type='primary' bindtap="handleSendDanmu"> 发送 </button>
</view>

<!-- 是否随机颜色 -->
<view class='selectColor'>
  <text> 随机颜色 </text>
  <switch bindchange='handleChange'></switch>
</view>

<!-- 选择默认颜色 -->

<view class='selectDefaultColor' bindtap="handleGotoSelectColor">
  <text> 选择颜色 </text>
  <view style="background: {{ defaultColor }}"></view>
</view>
/* pages/videoDanmu/videoDanmu.wxss */

#video{
  width: 100%;
  height: calc(750rpx * 225 / 300);
}

.sendDanmu{
  display: flex;
  height: 100rpx;
}

.sendDanmu textarea{
  border: 1px solid #ddd;
  height: 100rpx;
}

.selectColor{
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  border: 1px solid #ddd;
  align-items: center;
}

.selectDefaultColor{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  margin-top: 20rpx;
  margin-right: 30rpx;
}

.selectDefaultColor view{
  width: 50rpx;
  height: 50rpx;
  background-color: red;
}
// pages/videoDanmu/videoDanmu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 视频地址
    src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
    danmuList:
    [{
     text: '第 1s 出现的弹幕',
     color: '#ff0000',
     time: 1
    }, {
     text: '第 3s 出现的弹幕',
     color: '#ff00ff',
     time: 3
    }], // 初始弹幕列表
    defaultColor: 'red', // 弹幕默认颜色
    isRandomColor: false, // 控制弹幕是否随机颜色

  },

  // 获取弹幕内容
  handleDanmuContent(e){
    this.content = e.detail.value;

  },
  // 随机弹幕颜色
  randomColor(){
    let red = Math.random() * 255;
    let green = Math.random() * 255;
    let blue = Math.random() * 255;
    return `rgb(${red}, ${green}, ${blue})`
  },
  // 发送弹幕
  handleSendDanmu(){
    let color = '';
    // 通过状态值判断是默认颜色还是随机颜色
    if(this.data.isRandomColor){
      color = this.randomColor()
    }else{
      color = this.data.defaultColor
    }
    this.videoContext.sendDanmu({
      text: this.content,
      color
     })
  },
  // 处理弹幕是否随机颜色
  handleChange(e){
    // console.log(e.detail.value)
    this.setData({
      isRandomColor: e.detail.value
    })
  },
  // 跳转到选择颜色页面
  handleGotoSelectColor(){
    wx.navigateTo({
     url: "/pages/selectColor/selectColor",
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 创建 video 上下文 VideoContext 对象。通过这个对象发送弹幕
    this.videoContext = wx.createVideoContext('video', this)
  }
})

3. selectColor

<view class='color-wrap'>
  <view wx:for="{{ color }}" wx:key='index'
  style="background: {{ item.number }}"
  bindtap="handleGetColor"
  data-color=" {{ item.number }} "
  >
    {{ item.color }}
  </view>
</view>
/* pages/selectColor/selectColor.wxss */

.color-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.color-wrap view{
  width: 100rpx;
  height: 100rpx;
  background-color: red;
  margin-top: 20rpx;
}
// pages/selectColor/selectColor.js
import color from './color'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    color
  },
  // 获取选择的颜色
  handleGetColor(e){
    // console.log(e.currentTarget.dataset.color)
    const color = e.currentTarget.dataset.color;
    // 获取页面栈
    const pages = getCurrentPages()
    const page = pages[0]; // 上一页面
    page.setData({
      defaultColor: color
    })
    // 返回上一页面
    wx.navigateBack({
     delta: 0,
    })
  }
})
export default [
  { key: 1, color: ' 白色 ', number: '#FFFFFF' },
 
  { key: 2, color: ' 红色 ', number: '#FF0000' },
 
  { key: 3, color: ' 绿色 ', number: '#00FF00' },
 
  { key: 4, color: ' 蓝色 ', number: '#0000FF' },
 
  { key: 5, color: ' 牡丹红 ', number: '#FF00FF' },
 
  { key: 6, color: ' 青色 ', number: '#00FFFF' },
 
  { key: 7, color: ' 黄色 ', number: '#FFFF00' },
 
  { key: 8, color: ' 黑色 ', number: '#000000' },
 
  { key: 9, color: ' 海蓝 ', number: '#70DB93' },
 
  { key: 10, color: ' 巧克力色 ', number: '#5C3317' },
 
  { key: 11, color: ' 蓝紫色 ', number: '#9F5F9F' },
 
  { key: 12, color: ' 黄铜色 ', number: '#B5A642' },
 
  { key: 13, color: ' 亮金色 ', number: '#D9D919' },
 
  { key: 14, color: ' 棕色 ', number: '#A67D3D' },
 
  { key: 15, color: ' 青铜色 ', number: '#8C7853' },
 
  { key: 16, color: ' 2号青铜色 ', number: '#A67D3D' },
 
  { key: 17, color: ' 士官服蓝色 ', number: '#5F9F9F' },
 
  { key: 18, color: ' 冷铜色 ', number: '#D98719' },
 
  { key: 19, color: ' 铜色 ', number: '#B87333' },
 
  { key: 20, color: ' 珊瑚红 ', number: '#FF7F00' },
 
  { key: 21, color: ' 紫蓝色 ', number: '#42426F' },
 
  { key: 22, color: ' 深棕 ', number: '#5C4033' },
 
  { key: 23, color: ' 深绿 ', number: '#2F4F2F' },
 
  { key: 24, color: ' 深铜绿色 ', number: '#4A766E' },
 
  { key: 25, color: ' 深橄榄绿 ', number: '#4F4F2F' },
 
  { key: 26, color: ' 深兰花色 ', number: '#9932CD' },
 
  { key: 27, color: ' 深紫色 ', number: '#871F78' },
 
  { key: 28, color: ' 深石板蓝 ', number: '#6B238E' },
 
  { key: 29, color: ' 深铅灰色 ', number: '#2F4F4F' },
 
  { key: 30, color: ' 深棕褐色 ', number: '#97694F' },
 
  { key: 32, color: ' 深绿松石色 ', number: '#7093DB' },
 
  { key: 33, color: ' 暗木色 ', number: '#855E42' },
 
  { key: 34, color: ' 淡灰色 ', number: '#545454' },
 
  { key: 35, color: ' 土灰玫瑰红色 ', number: '#856363' },
 
  { key: 36, color: ' 长石色 ', number: '#D19275' },
 
  { key: 37, color: ' 火砖色 ', number: '#8E2323' },
 
  { key: 38, color: ' 森林绿 ', number: '#238E23' },
 
  { key: 39, color: ' 金色 ', number: '#CD7F32' },
 
  { key: 40, color: ' 鲜黄色 ', number: '#DBDB70' },
 
  { key: 41, color: ' 灰色 ', number: '#C0C0C0' },
 
  { key: 42, color: ' 铜绿色 ', number: '#527F76' },
 
  { key: 43, color: ' 青黄色 ', number: '#93DB70' },
 
  { key: 44, color: ' 猎人绿 ', number: '#215E21' },
 
  { key: 45, color: ' 印度红 ', number: '#4E2F2F' },
 
  { key: 46, color: ' 土黄色 ', number: '#9F9F5F' },
 
  { key: 47, color: ' 浅蓝色 ', number: '#C0D9D9' },
 
  { key: 48, color: ' 浅灰色 ', number: '#A8A8A8' },
 
  { key: 49, color: ' 浅钢蓝色 ', number: '#8F8FBD' },
 
  { key: 59, color: ' 浅木色 ', number: '#E9C2A6' },
 
  { key: 60, color: ' 石灰绿色 ', number: '#32CD32' },
 
  { key: 61, color: ' 桔黄色 ', number: '#E47833' },
 
  { key: 62, color: ' 褐红色 ', number: '#8E236B' },
 
  { key: 63, color: ' 中海蓝色 ', number: '#32CD99' },
 
  { key: 64, color: ' 中蓝色 ', number: '#3232CD' },
 
  { key: 65, color: ' 中森林绿 ', number: '#6B8E23' },
 
  { key: 66, color: ' 中鲜黄色 ', number: '#EAEAAE' },
 
  { key: 67, color: ' 中兰花色 ', number: '#9370DB' },
 
  { key: 68, color: ' 中海绿色 ', number: '#426F42' },
 
  { key: 69, color: ' 中石板蓝色 ', number: '#7F00FF' },
 
  { key: 70, color: ' 中春绿色 ', number: '#7FFF00' },
 
  { key: 71, color: ' 中绿松石色 ', number: '#70DBDB' },
 
  { key: 72, color: ' 中紫红色 ', number: '#DB7093' },
 
  { key: 73, color: ' 中木色 ', number: '#A68064' },
 
  { key: 74, color: ' 深藏青色 ', number: '#2F2F4F' },
 
  { key: 75, color: ' 海军蓝 ', number: '#23238E' },
 
  { key: 76, color: ' 霓虹篮 ', number: '#4D4DFF' },
 
  { key: 77, color: ' 霓虹粉红 ', number: '#FF6EC7' },
 
  { key: 78, color: ' 新深藏青色 ', number: '#00009C' },
 
  { key: 79, color: ' 新棕褐色 ', number: '#EBC79E' },
 
  { key: 80, color: ' 暗金黄色 ', number: '#CFB53B' },
 
  { key: 81, color: ' 橙色 ', number: '#FF7F00' },
 ];

4. 效果图

微信小程序视频弹幕发送功能的实现

颜色选择

微信小程序视频弹幕发送功能的实现

到此这篇关于微信小程序视频弹幕发送功能的实现的文章就介绍到这了,更多相关小程序视频弹幕发送内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
vue实现模态框的通用写法推荐
Feb 26 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JavaScript生成随机验证码代码实例
Sep 28 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
React实现todolist功能
Dec 28 #Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 #Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 #Javascript
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
js仿淘宝放大镜效果
Dec 28 #Javascript
JavaScript实现原型封装轮播图
Dec 27 #Javascript
You might like
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python怎么判断素数
2020/07/01 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
经理秘书岗位职责
2013/11/14 职场文书
家长评语和期望
2014/02/10 职场文书
《自然之道》教学反思
2014/02/11 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
大型会议策划方案
2014/05/17 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
公证处委托书
2015/01/28 职场文书
好好学习保证书
2015/02/26 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
mysql中关键词exists的用法实例详解
2022/06/10 MySQL