微信小程序视频弹幕发送

文章目录

1. 目录结构
2. videoDanmu
3. selectColor
4. 效果图

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

颜色选择

微信小程序视频弹幕发送相关推荐

微信小程序视频弹幕效果
这次,和大家一起探讨下小程序视频弹幕一.按照老规矩,先附上gif效果图: 二.接下来看下官方文档API对vide说明 PS:相关属性解析: danmu-list:弹幕列表 enable-da ...
微信小程序-视频弹幕的项目
1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 一般微信小程序需要配置.wxml.wxss.js.json文件,所有接下来也是要配置这几个文件,请看下图: 第一: index.wxml < ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
微信小程序视频上传组件直接上传至阿里云OSS
一.微信小程序视频上传组件示例多视频上传功能,直传OSS,可以直接从OSS删除:组织接受以逗号分隔的视频url地址,自动列出多个视频,但点击上传按钮上传视频后,同样返回以逗号分隔的视频url地址. ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】
在开发微信小程序的时候,发现[发送给朋友].[分享到朋友圈].[复制链接]功能,灰色不可用. 很常见的功能,但是这几个功能,并不是你项目建起来了就有的. 1.[发送给朋友]使用 onShareAppM ...
详细解析黑马微信小程序视频--【思维导图知识范围】
语言视频选择收录专辑链接 C 张雪峰推荐选择了计算机专业之后-在大学期间卷起来-[大学生活篇] JAVA 黑马B站视频JAVA部分的知识范围.学习步骤详解 JAVAWEB 黑马B站视频JAVAWEB ...
微信小程序-手持弹幕_小程序弹幕源码
哈喽,大家好,我是超哥. 最近在抖音刷到手持弹幕的视频,觉得是一个非常有趣应用,在手持弹幕小程序这个软件当中,你可以设置很长一段话,很适合追星.挑战一下自己,做一个小程序的手持弹幕应用. 微信小程序搜 ...
微信小程序web-view能发送ajax,微信小程序web-view组件的坑
最近在做一个活动时候,需要将H5页面嵌入别人家的小程序中,正常微信环境中我们会通过在分享链接拼接参数的方式,来获取微信用户的分享关系,然而在小程序中分享的地址是小程序自己的path,其他用户点击的时候 ...

微信小程序视频弹幕发送

文章目录

1. 目录结构

2. videoDanmu

3. selectColor

4. 效果图

微信小程序视频弹幕发送相关推荐

最新文章

热门文章

微信小程序 视频弹幕发送

文章目录

1. 目录结构

2. videoDanmu

3. selectColor

4. 效果图

微信小程序 视频弹幕发送相关推荐

最新文章

热门文章

微信小程序视频弹幕发送

微信小程序视频弹幕发送相关推荐