网站首页 > web开发 > JavaScript 正文
本文实例为大家分享了微信小程序视频弹幕位置随机的具体代码,供大家参考,具体内容如下
最近更新开发工具之后,微信小程序视频播放弹幕不再自动随机,所以就用了一个比较取巧的方法(多条空弹幕和自己要发送的弹幕一起发送,利用随机数控制顺序就行了);
wxml代码
<!--pages/study/video/videoplay/videoplay.wxml--> <view class="page-body"> <view class="page-section tc"> <video id="myVideo" 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 show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture' ></video> <view style="margin: 30rpx auto" class="weui-label">弹幕内容</view> <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" /> <button style="margin: 30rpx auto" bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button> <navigator style="margin: 30rpx auto" url="picture-in-picture" hover-class="other-navigator-hover"> <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button> </navigator> </view> </view>
js代码
// pages/study/video/videoplay/videoplay.js var that; function getRandomColor() { const rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length === 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onShareAppMessage() { return { title: 'video', path: 'page/component/pages/video/video' } }, onReady() { that = this; this.videoContext = wx.createVideoContext('myVideo') }, onHide() { }, inputValue: '', data: { src: '', danmuList: [{ text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 }, { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 }], }, bindInputBlur(e) { this.inputValue = e.detail.value }, bindButtonTap() { const that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: ['front', 'back'], success(res) { that.setData({ src: res.tempFilePath }) } }) }, bindVideoEnterPictureInPicture() { console.log('进入小窗模式') }, bindVideoLeavePictureInPicture() { console.log('退出小窗模式') }, bindPlayVideo() { this.videoContext.play() }, bindSendDanmu() { // 利用循环和随机数调整位置 var ranNum = Math.floor(Math.random()*10); var danmuList = []; for (let index = 0; index < 10; index++) { danmuList.push(''); } danmuList[ranNum] = this.inputValue; for (let index = 0; index < danmuList.length; index++) { this.videoContext.sendDanmu({ text: danmuList[index], color: '#ff0000' }); } }, videoErrorCallback(e) { console.log('视频错误信息:') console.log(e.detail.errMsg) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开源网。
- 上一篇: jquery插件实现图片对比
- 下一篇: JavaScript实现简单图片切换
猜你喜欢
- 2021-07-16 详解JavaScript中的执行上下文及调用堆栈
- 2021-07-16 详解Js模块化的作用原理和方案
- 2021-07-16 何时使用Map来代替普通的JS对象
- 2021-07-16 JavaScript实现简单图片切换
- 2021-07-16 浅谈node.js中间件有哪些类型
- 2021-07-16 微信小程序视频弹幕位置随机
- 2021-07-16 jquery插件实现图片对比
- 2021-07-16 JS ES6展开运算符的几个妙用
- 2021-07-16 vue的ssr服务端渲染示例详解
- 2021-07-16 JS使用canvas技术模仿echarts柱状图
你 发表评论:
欢迎- 2952℃JS彻底弄懂GMT和UTC时区
- 2824℃JS使用canvas技术模仿echarts柱状图
- 2649℃JS装饰者模式和TypeScript装饰器
- 2574℃JS ES6展开运算符的几个妙用
- 2543℃vue的ssr服务端渲染示例详解
- 2365℃jquery插件实现图片对比
- 2320℃微信小程序视频弹幕位置随机
- 1817℃docker安装redis设置密码并连接的操作
- 0℃未命名
- 开源分类
- 最近发表
-
- (1)python+selenium第一个自动化脚本:实现打开百度首页并搜索selenium
- Discuz!教程之启用HTTPS后解决各处遗留http://网址问题
- 网站如何识别 你是 selenium爬虫?那我们怎么解决(反反爬)
- 旋转拖动验证码解决方案
- python关键词排名_python实现百度关键词排名查询
- Unity3D研究院之通过ipa或apk获取游戏所使用的unity和Xcode版本
- Unity3D研究院编辑器之脚本生成Preset Libraries(十四)
- 手把手教你Charles抓包工具使用
- python开发的程序内存越来越大_遇到个python进程占用内存太多的问题 | 数据,更懂人心...
- Selenium Python3 请求头配置
- 开源网标签
本文暂时没有评论,来添加一个吧(●'◡'●)