首页
所有分类
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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
Vue.use源码分析
Apr 22 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
es6函数之尾调用优化实例分析
Apr 25 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
纸巾盒(1) 德生1994(1) 华普R-96(1) ICF-F10(1) YH-R296(1) PR-D3L(1) SRF-22W(1) 德生G88(1) SRF-40W(1) ICF-SW100(1)
You might like
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php返回相对时间（如：20分钟前，3天前）的方法
2015/04/14 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
vue内置指令详解
2018/04/03 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python魔法方法详解
2019/02/13 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站：Butlers.sk
2019/09/08 全球购物
求∏的近似值，直到最后一项的绝对值小于指定的数
2016/02/12 面试题
JSF的标签库有哪些
2012/04/27 面试题
法学专业自我鉴定
2014/02/05 职场文书
七匹狼男装广告词
2014/03/21 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
书香校园建设方案
2014/05/02 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
同学聚会通知短信
2015/04/20 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
Python中time标准库的使用教程
2022/04/13 Python