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

2024-03-28 08:11:44

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. 效果图

颜色选择

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

微信小程序弹幕功能简单实例

1.微信小程序----弹幕的实现(无后台) 小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层. 先贴wxml和wxss代码. wxml代码如下:  <swiper indicator-dots="{{indicatorDo
微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器微信已经封装的非常好.我这里只用了很简单的几个属性由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//
微信小程序 vidao实现视频播放和弹幕的功能

微信小程序 vidao视频播放及弹幕的功能的实现. vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备action属性,不能通过action来控制. .wxml <view class="section tc"> <video src="{{src}}" controls ></video>
mpvue微信小程序开发之实现一个弹幕评论

先上图就是一个简单的弹幕发送功能弹幕区的页面: <div class="content" v-show="doommData.length"> <div class="textLeft"></div> <div class="textItem"> <p class="text aon" v-if="item.display" v-
微信小程序视频弹幕发送功能的实现

1. 目录结构 2. videoDanmu  <video src="{{src}}" id='video' danmu-btn enable-danmu danmu-list="{{ danmuList }}" > </video>  <view class='sendDanmu'> <textarea name="" id
微信小程序视频弹幕位置随机

本文实例为大家分享了微信小程序视频弹幕位置随机的具体代码,供大家参考,具体内容如下最近更新开发工具之后,微信小程序视频播放弹幕不再自动随机,所以就用了一个比较取巧的方法(多条空弹幕和自己要发送的弹幕一起发送,利用随机数控制顺序就行了); wxml代码  <view class="page-body"> <view class="page-secti
微信小程序自动客服功能

微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var
微信小程序拍照和摄像功能实现方法示例

本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后
基于PHP实现微信小程序客服消息功能

项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南客服消息服务端适用场景客户消息流程图使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu
微信小程序websocket实现聊天功能

本文实例为大家分享了微信小程序websocket实现聊天功能的具体代码,供大家参考,具体内容如下效果图: chat.js var utils = require("../../utils/util.js") Page({ /** * 页面的初始数据 */ data: { newsList:[], input:null, openid:null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = thi
微信小程序实现弹幕墙（祝福墙）

本文实例为大家分享了微信小程序实现弹幕墙的具体代码,供大家参考,具体内容如下为了解决左右弹幕重叠问题,也是找了网上挺多案例,最后都不行,最后利用四个数组和css3动画animation来解决这是个祝福墙,用户发送弹幕到后台审核,审核通过显示在前端  <view class="barrage" wx:if="{{IsPush}}"> <view class="barrage-a"> &
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图从左边的列表页调到右边的详情页二.页面之间的跳转首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi
微信小程序实现的涂鸦功能示例【附源码下载】

本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container">  <view class="canvas_area">  &
微信小程序实现多选功能

本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码:   <view class='answer-list'> <view class='answer-child'> <text class='answer-title'><text style='margin-right:28rpx;

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

相关推荐

随机推荐