微信小程序 - 发送视频弹幕
微信小程序官方文档提供了发送视频弹幕的功能,参照其功能做了一些改动,实现可发送用户自定义颜色的弹幕。
function getRandomColor() { var rgb = []; for (var i = 0; i < 3; ++i) { var color = Math.floor(Math.random() * 256).toString(16); color = color.length == 1 ? '0' + color : color; rgb.push(color); } return '#' + rgb.join(''); } Page({ inputValue: '', data: { isRandomColor: true, src: '', numberColor: "#ff0000", danmuList: [{ text: '第 1s 出现的红色弹幕', color: '#ff0000', time: 1 }, { text: '第 2s 出现的绿色弹幕', color: '#00ff00', time: 2 }] }, onLoad: function onLoad() { var _this = this; wx.getSystemInfo({ success: function success(res) { // video标签默认宽度300px、高度225px var windowWidth = res.windowWidth; var videoHeight = 225 / 300 * windowWidth; _this.setData({ videoWidth: windowWidth, videoHeight: videoHeight }); } }); }, onReady: function onReady(res) { this.videoContext = wx.createVideoContext('myVideo'); }, onShow: function onShow() { var _this = this; wx.getStorage({ key: 'numberColor', success: function success(res) { _this.setData({ numberColor: res.data }); } }); }, 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); }, switchChange: function(e) { this.setData({ isRandomColor: e.detail.value }); }, //跳转到选择颜色的页面 selectColor: function() { wx.navigateTo({ url: '../selectColor/selectColor', success: function(res) { }, fail: function fail() { }, complete: function() { } }); } });
<view class="section tc"> <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> <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 type="primary" style="margin:30rpx;" bindtap="bindSendDanmu">发送弹幕</button> </view> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">随机颜色</view> <view class="weui-cell__ft"> <switch checked bindchange="switchChange" /> </view> </view> <view class="colorstyle" bindtap="selectColor"> <text>选择颜色</text> <view style="height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}"></view> </view> </view>
.weui-cells { position: relative; margin-top: 1.17647059em; background-color: #FFFFFF; line-height: 1.41176471; font-size: 17px; } .weui-cells:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells_after-title { margin-top: 0; } .weui-cell__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .weui-cell__ft { text-align: right; color: #999999; } .weui-cell { padding: 10px 10px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cell:before { content: " "; position: absolute; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; left: 15px; } .weui-cell:first-child:before { display: none; } .colorstyle{ border-top: 2px solid #eee; border-bottom: 2px solid #eee; padding-left: 10px; padding-right: 10px; font-size: 17px; line-height: 100rpx; display: flex; flex-direction: row; justify-content:space-between; } .vertical { height: 40px; position: absolute; top: 50%; margin-top: -20px; }
效果如图:
下面是选择弹幕文字颜色的页面,选择文字颜色之后跳转回发送弹幕页面
var app = getApp() Page({ data: { color: [ { 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' } ], }, selectColor: function (e) { var number = e.currentTarget.dataset.number; try { wx.setStorageSync('numberColor', number) } catch (e) { } wx.navigateBack({ delta: 1, success: function (res) { }, fail: function () { }, complete: function () { } }) } })
<view class="page"> <view class="page__bd"> <view class="weui-grids"> <block wx:for-items="{{color}}" > <view class="weui-grid" data-number="{{item.number}}" bindtap="selectColor" > <view class="weui-grid__icon" style="background:{{item.number}}"/> </view> </block> </view> </view> </view>
.weui-grids { border-top: 1rpx solid #D9D9D9; border-left: 1rpx solid #D9D9D9; } .weui-grid { position: relative; float: left; padding: 20rpx 20rpx; width: 20%; box-sizing: border-box; border-right: 1rpx solid #D9D9D9; border-bottom: 1rpx solid #D9D9D9; } .weui-grid_active { background-color: #ccc; } .weui-grid__icon { display: block; width: 100rpx; height: 100rpx; margin: 0 auto; box-shadow: 3px 3px 5px #bbb; } .weui-grid__label { margin-top: 5px; display: block; text-align: center; color: #000000; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
效果如图:
相关推荐
在这个"微信小程序源码-视频直播.rar"压缩包中,我们关注的是一个专门用于视频直播功能的小程序源码。这表明源码是构建一个支持实时视频流传输的小程序应用,让用户可以在微信平台上观看和参与直播。 首先,我们...
在微信小程序开发中,创建一个具备弹幕功能的视频播放器是提高用户体验的重要一环。本文将深入探讨如何实现视频播放器与自定义颜色的弹幕功能,主要围绕"微信小程序"和"视频"这两个核心概念展开。 首先,我们要了解...
在微信小程序开发中,创建一个具有弹幕功能的视频播放器可以极大地提升用户体验,特别是当用户希望参与互动或分享评论时。本教程聚焦于微信小程序中的`<video>`组件,介绍如何实现弹幕功能以及如何自定义弹幕颜色。 ...
【标题】"049-微信小程序-仿斗鱼直播小程序.zip" 提供的是一个关于微信小程序开发的项目,目标是构建一个类似斗鱼直播平台的应用。这个项目可以帮助开发者了解和掌握微信小程序在实现直播功能时的具体技术与设计思路...
这通常通过调用API完成,利用微信小程序的`wx.request`方法发送网络请求,处理JSON格式的响应数据。 4. **用户登录与授权**:为了实现个性化功能,如收藏、评论,小程序需要用户的登录状态。微信小程序提供了内置的...
- 直播间:用户可以观看直播、发送弹幕、打赏主播等功能。 - 主播列表:展示所有主播,可按人气、新近上线等条件排序。 - 我的:用户个人信息、观看历史、收藏、设置等。 **3. 数据接口与API调用** 为了获取斗鱼...
2. **网络请求与数据处理**:直播平台需要与服务器进行大量的数据交互,如获取直播列表、获取直播详情、发送弹幕、礼物打赏等。这通常涉及到API接口的调用,开发者需要理解并熟悉RESTful API的设计和使用。 3. **...
7. **事件处理**:用户可能需要发送弹幕,所以你需要监听用户的行为,如点击按钮发送弹幕,这需要用到事件绑定和事件处理函数。 8. **布局与样式**:在WXSS中,需要合理设置弹幕容器的布局和每个弹幕文字的样式,...
微信小程序(可AR扫描,同时发弹幕)AR_danmu-master.zip
4. **云服务接口调用**:通过调用微信小程序的API,与云服务商的SDK交互,实现视频的推送和接收,以及登录验证、弹幕发送等附加功能。 5. **数据管理**:可能还包括对用户数据、直播状态等信息的管理和存储,这可能...
在微信小程序开发中,创建一个具有弹幕功能的视频播放器可以极大地提升用户体验,特别是对于互动性和娱乐性较高的内容。本文将重点讲解如何利用微信小程序的`<video>`组件实现弹幕功能,并介绍如何自定义弹幕的颜色...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,它允许开发者通过微信生态系统构建功能丰富的交互式应用。这个压缩包包含了一系列与微信小程序相关的学习资源,涵盖了从基础到进阶的多个方面,非常适合想要...
### 基于微信小程序的弹幕处理方法和系统 #### 概述 随着移动互联网技术的发展,视频分享平台越来越受到人们的欢迎。其中,弹幕作为一种互动方式,为用户提供了实时评论、交流的功能,极大地提升了用户的参与度和...
3. **数据管理**:利用微信小程序的`wx.request` API进行网络请求,获取B站的视频数据。可能需要使用JSON格式的数据,通过`wx.setStorageSync`和`wx.getStorageSync`进行本地存储,实现离线查看或缓存功能。 4. **...
- **校友互动弹幕**: 弹幕功能通常通过监听用户输入,实时发送消息,并在页面上动态渲染,实现类似直播的互动效果。 - **校友定位**: 利用微信提供的地理位置接口`wx.getLocation`获取用户位置,可以展示校友的...
果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了… 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前...
微信小程序是一种轻量级的应用开发平台,主要用于在微信内提供便捷的服务和丰富的用户体验。这个"微信小程序设计-仿斗鱼直播小程序"项目旨在模仿知名的斗鱼直播平台,为用户提供类似的功能,如观看直播、互动聊天、...
5. **推送通知**:当有新的直播开始或者用户关注的主播开播时,通过微信小程序的消息推送功能,可以向用户发送通知,吸引他们进入直播间。 【技术实现细节】 1. **WXML与WXSS**:WXML(Weixin Markup Language)...
微信小程序:基于微信公众号的签到、抽奖、发送弹幕程序