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

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

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

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

先上gif:

再上几张图:

1.视频播放器

2.选择弹幕颜色

3.弹幕来了...

1.视频播放器

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

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

弹幕列表的元素:

{

text: ‘第 1s 出现的红色弹幕‘,//文本

color: ‘#ff0000‘,//颜色

time: 1//发送的时间

}

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

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

<!--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>

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代码下载

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

欢迎批评!

时间： 2024-10-11 11:58:13

微信小程序开发之视频播放器弹幕弹幕颜色自定义的相关文章

微信小程序开发之大转盘仿天猫超市抽奖

天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些. 技术相关: 1.微信

微信小程序_微信小程序开发，小程序源码、案例、教程

原文地址:http://whosmall.com/?post=448 本文标签: 微信小程序小程序源码案例小程序项目小程序源码微信小程序教程什么是微信小程序? 微信小程序是微信基于微信平台的一个应用发布平台,微信小程序app开发属于原生app组件提供js接口的开发方式,比混合是app的用户体验更好,仅次于原生应用. 不过微信小程序定位于小,要符合轻量易用无需下载,所以从体积上也是有限制,整个小程序应用体积不能超过1M. 微信小程序的应用场景? 微信小程序的应用场景适用于轻量应用,非强交

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍微信小程序设计指南微信小程序开发文档微信小程序运营规范微信小程序开发者社区三.微信小程序解决方案: 微信小程序会话管理场景微信小程序文件上传下载应用场景微信小程序WebSocket长连接应用场景微信小程序视频应用场景四.代码: 会话管理场景文件上传下载应用场景

微信小程序开发的入门教程

广州微信小程序开发公司(www.dthulian.com)品向科技,下面跟大家详细介绍微信小程序开发的入门教程: 开发前准备: 注册小程序帐号绑定开发者登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者. 已认证的小程序可以绑定不多于20个开发者.未认证的小程序可以绑定不多于10个开发者. 获取AppID下载并安装开发者工具下载完成后,使用管理员或者绑定的开发者微信号扫码登录. 一个微信小程序创建项目我们需要通过开发者工具,来完成小程序创建和代码编辑. 开发者工具安装完成后

微信小程序开发（三）开发工具推荐VSCode

虽然微信小程序官方开发工具非常优秀,但用的时间久了,会发现一些问题,比如代码编辑区小,自定义能力差,不支持插件,有时还会出现莫名其妙的bug,最不能忍的是编辑器代码提示功能不健全,这对于新手来说,很不友好.为了让新手少走弯路,我推荐一款编辑器VSCode. Visual Studio Code,简称VSCode,是微软出的一款轻量级代码编辑器,免费,功能强大,支持中文,对JavaScript支持非常好,自带很多功能,例如代码格式化,代码智能提示补全.而且支持各种插件. 官网:https://co

10分钟入门微信小程序开发：从环境搭建到开发出第一个程序。

小程序简介小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作:用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散. 本文带大家快速入门小程开发,了解从环境搭建到开发出一个简单hello world程序,从而上手小程序开发,让你快速成功小程序开发人员.之后,想开发什么样的小程序,就可以自己研究和努力了. 下面,是循序渐经的步骤: ?1.注册小程序在开发之前,当然需要先注册一个小程序账号. 进入“微信公众平台”进行注

Java微信小程序开发_00_资源帖

1.微信小程序开发:http://blog.csdn.net/column/details/13721.html?&page=1 2.微信小程序栏目:http://blog.csdn.net/column/details/14653.html?&page=2 3.

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

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

微信小程序开发之视频播放器 弹幕 弹幕颜色自定义的相关文章

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

微信小程序开发之视频播放器弹幕弹幕颜色自定义的相关文章