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

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

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

先上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

<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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-12-05

微信小程序 参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

微信小程序(应用号)简单实例应用及实例详解

Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

微信小程序 弹幕功能简单实例

1.微信小程序----弹幕的实现(无后台) 小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层. 先贴wxml和wxss代码. wxml代码如下: <!-- pages/index/index.wxml --> <swiper indicator-dots="{{indicatorDo

微信小程序 实现列表刷新的实例详解

微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

微信小程序 vidao实现视频播放和弹幕的功能

微信小程序 vidao视频播放及弹幕的功能的实现. vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备action属性,不能通过action来控制. .wxml <view class="section tc"> <video src="{{src}}" controls ></video>

微信小程序 for 循环详解

1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

微信小程序 wx.request(接口调用方式)详解及实例

微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

微信小程序 实战小程序实例

微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

微信小程序 数据访问实例详解

先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

微信小程序 WXML、WXSS 和JS介绍及详解

前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

微信小程序wx.previewImage预览图片实例详解

一.小知识 二.例子 1.wxml <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <im

微信小程序换肤功能实现代码(思路详解)

在手机.电脑使用频率如此高的当下,应用可以更换皮肤,以提升美观性,并减轻屏幕对眼睛的刺激,无疑对用户体验有很大的帮助 实现功能 要实现如上更换皮肤的效果,有几个思路: 1.准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用: 2.设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤: 3.将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤: 下面介绍一些实现的细节 wxml <view class="page"

微信小程序 利用css实现遮罩效果实例详解

微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content"> <!-- 头像 --> <view class="author-date"> &

微信小程序按钮点击跳转页面详解

微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

微信小程序移动拖拽视图-movable-view实例详解

JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

微信小程序 可搜索的地址选择实现详解

这篇文章主要介绍了微信小程序 可搜索的地址选择实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最终实现效果: 效果实现步骤 新建index文件夹 index.wxml <!--pages/index/index.wxml--> <view class='container'> <view bindtap='onChangeAddress'> <input value="{{address}}&q

微信小程序canvas开发水果老虎机的思路详解

在这个超长假期中,无聊...,所以动手做一个早就计划要做的小玩意, 水果老虎机 ,嗯,这是一个小程序而不是小游戏... 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据.但,问题是动画性能过于孱弱,如图构建一个 7x7 的水果盘,动画性能估计会惨不忍睹,而且纯粹模板结构无论使用 animation 动画方法还是 css 的

微信小程序 开发MAP(地图)实例详解

微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

微信小程序之绑定点击事件实例详解

微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo