首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

Posted in Javascript onDecember 08, 2016

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?

果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.

先上gif:

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

再上几张图:

1.视频播放器

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

2.选择弹幕颜色

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

3.弹幕来了...

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

1.视频播放器

微信已经封装的非常好.我这里只用了很简单的几个属性

由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.

弹幕列表的元素:

{
    text: '第 1s 出现的红色弹幕',//文本
    color: '#ff0000',//颜色
    time: 1//发送的时间
   }

其他的属性就不说了,以后遇到再细细研究.

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

2.选择弹幕颜色

从上面的弹幕列表元素可以看出,微信并没有给开发者太多的自定义空间.文本?时间?颜色?

也就颜色还能玩出点花样吧.

于是我就简单的做了个常用颜色的列表.算是自定义弹幕颜色吧

上代码:

ps:代码没整理,很烂,凑活着看吧.

1.index.wxml

<!--index.wxml--> 
<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 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>

2.index.wxss

(从别的项目粘过来的.哈哈)

/**index.wxss**/ 
.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; 
}

3.index.js

//index.js 
function getRandomColor() { 
 let 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({ 
 onLoad: function () { 
  var _this = this; 
  //获取屏幕宽高  
  wx.getSystemInfo({ 
   success: function (res) { 
    var windowWidth = res.windowWidth; 
    //video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。 
    var videoHeight = (225 / 300) * windowWidth//屏幕高宽比  
    console.log('videoWidth: ' + windowWidth) 
    console.log('videoHeight: ' + videoHeight) 
    _this.setData({ 
     videoWidth: windowWidth, 
     videoHeight: videoHeight 
    }) 
   } 
  }) 
 }, 
 onReady: function (res) { 
  this.videoContext = wx.createVideoContext('myVideo') 
 }, 
 onShow: function () { 
  var _this = this; 
  //获取年数 
  wx.getStorage({ 
   key: 'numberColor', 
   success: function (res) { 
    console.log(res.data + "numberColor----") 
    _this.setData({ 
     numberColor: res.data, 
    }) 
   } 
  }) 
 }, 
 inputValue: '', 
 data: { 
  isRandomColor: true,//默认随机 
  src: '', 
  numberColor: "#ff0000",//默认黑色 
 
  danmuList: [ 
   { 
    text: '第 1s 出现的红色弹幕', 
    color: '#ff0000', 
    time: 1 
   }, 
   { 
    text: '第 2s 出现的绿色弹幕', 
    color: '#00ff00', 
    time: 2 
   } 
  ] 
 }, 
 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) 
 }, 
 //选择颜色页面 
 selectColor: function () { 
  wx.navigateTo({ 
   url: '../selectColor/selectColor', 
   success: function (res) { 
    // success 
   }, 
   fail: function () { 
    // fail 
   }, 
   complete: function () { 
    // complete 
   } 
  }) 
 }, 
 //switch是否选中 
 switchChange: function (e) { 
  this.setData({ 
   isRandomColor: e.detail.value 
  }) 
 } 
})

4.selectColor.wxml

<span style="font-size:24px;"><!--selectColor.wxml--> 
<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></span>

5.selectColor.wxss

/**selectColor.wxss**/ 
.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; 
}

6.selectColor.js

/selectColor.js 
//获取应用实例 
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' }, 
  ], 
 }, 
 
 onLoad: function () { 
 
 }, 
 //点击后关闭选色页面 
 selectColor: function (e) { 
  var number = e.currentTarget.dataset.number; 
  console.log("number: " + number) 
  try { 
   wx.setStorageSync('numberColor', number) 
  } catch (e) { 
  } 
  wx.navigateBack({ 
   delta: 1, // 回退前 delta(默认为1) 页面 
   success: function (res) { 
    // success 
   }, 
   fail: function () { 
    // fail 
   }, 
   complete: function () { 
    // complete 
   } 
  }) 
 } 
})

demo代码下载：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

- Author -

dzp_coder

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
jquery css实现流程进度条
Mar 26 jQuery
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 #Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 #Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 #Javascript
浅谈javascript中执行环境（作用域）与作用域链
Dec 08 #Javascript
原生js编写焦点图效果
Dec 08 #Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 #Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 #Javascript
PIL(1) Flask(2) 柱状图(1) Python(3) 鲲鹏(1) 验证码(1) GCN(1) 裁剪图片(1) 进度条(1) Pytesseract(1)
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[03:07]【DOTA2亚洲邀请赛】我们，梦开始的地方
2017/03/07 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python读文件的步骤
2019/10/08 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
美国最大的宠物药店：1-800-PetMeds
2016/10/02 全球购物
eBay加拿大站：eBay.ca
2019/06/20 全球购物
Armor Lux法国官方网站：水手服装、成衣和内衣
2020/05/26 全球购物
宣传活动总结范文
2014/07/01 职场文书
捐书倡议书
2014/08/29 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
质量保证书格式模板
2015/02/27 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Java Spring读取和存储详细操作
2022/08/05 Java/Android