AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:03

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序开发之视频播放 弹幕 弹幕颜色自定义
相关的资讯,希望对您有帮助。

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

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.微信小程序开发之录音机 音频播放 动画 (真机可用)先上gif: 再上几张图:1.视频播放器 2.选 ...

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

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

微信小程序开发之录音机 音频播放 动画 (真机可用)



再上几张图:

1.视频播放器

2.选择弹幕颜色

3.弹幕来了...


1.视频播放器

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

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

弹幕列表的元素:

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

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


2.选择弹幕颜色

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

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

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


上代码:

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

1.index.wxml

  1. <view class=section tc>
  2. <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>
  3. <view class=btn-area>
  4. <view class=weui-cell weui-cell_input>
  5. <view class=weui-cell__bd>
  6. <input class=weui-input placeholder=请输入弹幕 bindblur=bindInputBlur />
  7. view>
  8. view>
  9. <button style=margin:30rpx; bindtap=bindSendDanmu>发送弹幕button>
  10. view>
  11. view>
  12. <view class=weui-cells weui-cells_after-title>
  13. <view class=weui-cell weui-cell_switch>
  14. <view class=weui-cell__bd>随机颜色view>
  15. <view class=weui-cell__ft>
  16. <switch checked bindchange=switchChange />
  17. view>
  18. view>
  19. <view class=colorstyle bindtap=selectColor>
  20. <text>选择颜色text>
  21. <view style=height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}>view>
  22. view>

2.index.wxss

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

  1. /**index.wxss**/
  2. .weui-cells {
  3. position: relative;
  4. margin-top: 1.17647059em;
  5. background-color: #FFFFFF;
  6. line-height: 1.41176471;
  7. font-size: 17px;
  8. }
  9. .weui-cells:before {
  10. content: ;
  11. position: absolute;
  12. left: 0;
  13. top: 0;
  14. right: 0;
  15. height: 1px;
  16. border-top: 1rpx solid #D9D9D9;
  17. color: #D9D9D9;
  18. }
  19. .weui-cells:after {
  20. content: ;
  21. position: absolute;
  22. left: 0;
  23. bottom: 0;
  24. right: 0;
  25. height: 1px;
  26. border-bottom: 1rpx solid #D9D9D9;
  27. color: #D9D9D9;
  28. }
  29. .weui-cells_after-title {
  30. margin-top: 0;
  31. }
  32. .weui-cell__bd {
  33. -webkit-box-flex: 1;
  34. -webkit-flex: 1;
  35. flex: 1;
  36. }
  37. .weui-cell__ft {
  38. text-align: right;
  39. color: #999999;
  40. }
  41. .weui-cell {
  42. padding: 10px 10px;
  43. position: relative;
  44. display: -webkit-box;
  45. display: -webkit-flex;
  46. display: flex;
  47. -webkit-box-align: center;
  48. -webkit-align-items: center;
  49. align-items: center;
  50. }
  51. .weui-cell:before {
  52. content: ;
  53. position: absolute;
  54. top: 0;
  55. right: 0;
  56. height: 1px;
  57. border-top: 1rpx solid #D9D9D9;
  58. color: #D9D9D9;
  59. left: 15px;
  60. }
  61. .weui-cell:first-child:before {
  62. display: none;
  63. }
  64. .colorstyle{
  65. border-top: 2px solid #eee;
  66. border-bottom: 2px solid #eee;
  67. padding-left: 10px;
  68. padding-right: 10px;
  69. font-size: 17px;
  70. line-height: 100rpx;
  71. display: flex;
  72. flex-direction: row;
  73. justify-content:space-between;
  74. }


3.index.js

  1. //index.js
  2. function getRandomColor() {
  3. let rgb = []
  4. for (let i = 0; i < 3; ++i) {
  5. let color = Math.floor(Math.random() * 256).toString(16)
  6. color = color.length == 1 ? 0 + color : color
  7. rgb.push(color)
  8. }
  9. return # + rgb.join()
  10. }
  11. Page({
  12. onLoad: function () {
  13. var _this = this;
  14. //获取屏幕宽高
  15. wx.getSystemInfo({
  16. success: function (res) {
  17. var windowWidth = res.windowWidth;
  18. //video标签认宽度300px、高度225px,设置宽高需要通过wxss设置widthheight
  19. var videoHeight = (225 / 300) * windowWidth//屏幕高宽比
  20. console.log(videoWidth: + windowWidth)
  21. console.log(videoHeight: + videoHeight)
  22. _this.setData({
  23. videoWidth: windowWidth,
  24. videoHeight: videoHeight
  25. })
  26. }
  27. })
  28. },
  29. onReady: function (res) {
  30. this.videoContext = wx.createVideoContext(myVideo)
  31. },
  32. onShow: function () {
  33. var _this = this;
  34. //获取年数
  35. wx.getStorage({
  36. key: numberColor,
  37. success: function (res) {
  38. console.log(res.data + numberColor----)
  39. _this.setData({
  40. numberColor: res.data,
  41. })
  42. }
  43. })
  44. },
  45. inputValue: ,
  46. data: {
  47. isRandomColor: true,//默认随机
  48. src: ,
  49. numberColor: #ff0000,//默认黑色
  50. danmuList: [
  51. {
  52. text: 第 1s 出现的红色弹幕,
  53. color: #ff0000,
  54. time: 1
  55. },
  56. {
  57. text: 第 2s 出现的绿色弹幕,
  58. color: #00ff00,
  59. time: 2
  60. }
  61. ]
  62. },
  63. bindInputBlur: function (e) {
  64. this.inputValue = e.detail.value
  65. },
  66. bindSendDanmu: function () {
  67. if (this.data.isRandomColor) {
  68. var color = getRandomColor();
  69. } else {
  70. var color = this.data.numberColor;
  71. }
  72. this.videoContext.sendDanmu({
  73. text: this.inputValue,
  74. color: color
  75. })
  76. },
  77. videoErrorCallback: function (e) {
  78. console.log(视频错误信息:)
  79. console.log(e.detail.errMsg)
  80. },
  81. //选择颜色页面
  82. selectColor: function () {
  83. wx.navigateTo({
  84. url: ../selectColor/selectColor,
  85. success: function (res) {
  86. // success
  87. },
  88. fail: function () {
  89. // fail
  90. },
  91. complete: function () {
  92. // complete
  93. }
  94. })
  95. },
  96. //switch是否选中
  97. switchChange: function (e) {
  98. this.setData({
  99. isRandomColor: e.detail.value
  100. })
  101. }
  102. })


4.selectColor.wxml

  1. <span style=font-size:24px;>
  2. <view class=page>
  3. <view class=page__bd>
  4. <view class=weui-grids>
  5. <block wx:for-items={{color}} >
  6. <view class=weui-grid data-number={{item.number}} bindtap=selectColor >
  7. <view class=weui-grid__icon style=background:{{item.number}}/>
  8. view>
  9. block>
  10. view>
  11. view>
  12. view>span>

5.selectColor.wxss

  1. /**selectColor.wxss**/
  2. .weui-grids {
  3. border-top: 1rpx solid #D9D9D9;
  4. border-left: 1rpx solid #D9D9D9;
  5. }
  6. .weui-grid {
  7. position: relative;
  8. float: left;
  9. padding: 20rpx 20rpx;
  10. width: 20%;
  11. box-sizing: border-box;
  12. border-right: 1rpx solid #D9D9D9;
  13. border-bottom: 1rpx solid #D9D9D9;
  14. }
  15. .weui-grid_active {
  16. background-color: #ccc;
  17. }
  18. .weui-grid__icon {
  19. display: block;
  20. width: 100rpx;
  21. height: 100rpx;
  22. margin: 0 auto;
  23. box-shadow: 3px 3px 5px #bbb;
  24. }
  25. .weui-grid__label {
  26. margin-top: 5px;
  27. display: block;
  28. text-align: center;
  29. color: #000000;
  30. font-size: 14px;
  31. white-space: nowrap;
  32. text-overflow: ellipsis;
  33. overflow: hidden;
  34. }

6.selectColor.js

  1. /selectColor.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. data: {
  6. color: [
  7. { key: 1, color: 白色 , number: #FFFFFF },
  8. { key: 2, color: 红色 , number: #FF0000 },
  9. { key: 3, color: 绿色 , number: #00FF00 },
  10. { key: 4, color: 蓝色 , number: #0000FF },
  11. { key: 5, color: 牡丹红 , number: #FF00FF },
  12. { key: 6, color: 青色 , number: #00FFFF },
  13. { key: 7, color: 黄色 , number: #FFFF00 },
  14. { key: 8, color: 黑色 , number: #000000 },
  15. { key: 9, color: 海蓝 , number: #70DB93 },
  16. { key: 10, color: 巧克力色 , number: #5C3317 },
  17. { key: 11, color: 蓝紫色 , number: #9F5F9F },
  18. { key: 12, color: 黄铜色 , number: #B5A642 },
  19. { key: 13, color: 亮金色 , number: #D9D919 },
  20. { key: 14, color: 棕色 , number: #A67D3D },
  21. { key: 15, color: 青铜色 , number: #8C7853 },
  22. { key: 16, color: 2号青铜色 , number: #A67D3D },
  23. { key: 17, color: 士官服蓝色 , number: #5F9F9F },
  24. { key: 18, color: 冷铜色 , number: #D98719 },
  25. { key: 19, color: 铜色 , number: #B87333 },
  26. { key: 20, color: 珊瑚红 , number: #FF7F00 },
  27. { key: 21, color: 紫蓝色 , number: #42426F },
  28. { key: 22, color: 深棕 , number: #5C4033 },
  29. { key: 23, color: 深绿 , number: #2F4F2F },
  30. { key: 24, color: 深铜绿色 , number: #4A766E },
  31. { key: 25, color: 深橄榄绿 , number: #4F4F2F },
  32. { key: 26, color: 深兰花色 , number: #9932CD },
  33. { key: 27, color: 深紫色 , number: #871F78 },
  34. { key: 28, color: 深石板蓝 , number: #6B238E },
  35. { key: 29, color: 深铅灰色 , number: #2F4F4F },
  36. { key: 30, color: 深棕褐色 , number: #97694F },
  37. { key: 32, color: 深绿松石色 , number: #7093DB },
  38. { key: 33, color: 暗木色 , number: #855E42 },
  39. { key: 34, color: 淡灰色 , number: #545454 },
  40. { key: 35, color: 土灰玫瑰红色 , number: #856363 },
  41. { key: 36, color: 长石色 , number: #D19275 },
  42. { key: 37, color: 火砖色 , number: #8E2323 },
  43. { key: 38, color: 森林绿 , number: #238E23 },
  44. { key: 39, color: 金色 , number: #CD7F32 },
  45. { key: 40, color: 鲜黄色 , number: #DBDB70 },
  46. { key: 41, color: 灰色 , number: #C0C0C0 },
  47. { key: 42, color: 铜绿色 , number: #527F76 },
  48. { key: 43, color: 青黄色 , number: #93DB70 },
  49. { key: 44, color: 猎人绿 , number: #215E21 },
  50. { key: 45, color: 印度红 , number: #4E2F2F },
  51. { key: 46, color: 土黄色 , number: #9F9F5F },
  52. { key: 47, color: 浅蓝色 , number: #C0D9D9 },
  53. { key: 48, color: 浅灰色 , number: #A8A8A8 },
  54. { key: 49, color: 浅钢蓝色 , number: #8F8FBD },
  55. { key: 59, color: 浅木色 , number: #E9C2A6 },
  56. { key: 60, color: 石灰绿色 , number: #32CD32 },
  57. { key: 61, color: 桔黄色 , number: #E47833 },
  58. { key: 62, color: 褐红色 , number: #8E236B },
  59. { key: 63, color: 中海蓝色 , number: #32CD99 },
  60. { key: 64, color: 中蓝色 , number: #3232CD },
  61. { key: 65, color: 中森林绿 , number: #6B8E23 },
  62. { key: 66, color: 中鲜黄色 , number: #EAEAAE },
  63. { key: 67, color: 中兰花色 , number: #9370DB },
  64. { key: 68, color: 中海绿色 , number: #426F42 },
  65. { key: 69, color: 中石板蓝色 , number: #7F00FF },
  66. { key: 70, color: 中春绿色 , number: #7FFF00 },
  67. { key: 71, color: 中绿松石色 , number: #70DBDB },
  68. { key: 72, color: 中紫红色 , number: #DB7093 },
  69. { key: 73, color: 中木色 , number: #A68064 },
  70. { key: 74, color: 深藏青色 , number: #2F2F4F },
  71. { key: 75, color: 海军蓝 , number: #23238E },
  72. { key: 76, color: 霓虹篮 , number: #4D4DFF },
  73. { key: 77, color: 霓虹粉红 , number: #FF6EC7 },
  74. { key: 78, color: 新深藏青色 , number: #00009C },
  75. { key: 79, color: 新棕褐色 , number: #EBC79E },
  76. { key: 80, color: 暗金黄色 , number: #CFB53B },
  77. { key: 81, color: 橙色 , number: #FF7F00 },
  78. ],
  79. },
  80. onLoad: function () {
  81. },
  82. //点击后关闭选色页面
  83. selectColor: function (e) {
  84. var number = e.currentTarget.dataset.number;
  85. console.log(number: + number)
  86. try {
  87. wx.setStorageSync(numberColor, number)
  88. } catch (e) {
  89. }
  90. wx.navigateBack({
  91. delta: 1, // 回退前 delta(默认为1) 页面
  92. success: function (res) {
  93. // success
  94. },
  95. fail: function () {
  96. // fail
  97. },
  98. complete: function () {
  99. // complete
  100. }
  101. })
  102. }
  103. })

demo代码下载:audiodemo.rar


我的博客: http://blog.csdn.NET/qq_31383345


104阅读 | 0评论
你的回应
写文章

6948