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

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

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

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

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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索播放器
， video
，弹幕
微信小程序
微信小程序音乐播放器、微信小程序播放器、微信小程序视频播放器、小程序音乐播放器、微信小程序弹幕，以便于您获取更多的相关知识。

时间： 2024-07-31 15:10:56

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

微信小程序开发(4) 企业展示

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do somet

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, on

微信小程序开发资源整理

有兴趣学习微信小程序开发的可以关注简书专题微信小程序开发由于微信已经开发文档和开发工具了,所以下面的内容用处不大了. 具体参考:http://mp.weixin.qq.com/wiki/ 这篇文章只是资源的搬运工, 感谢各位大神的无私奉献. 由于微信小程序只邀请了200个大V内测,但是这些大V好多都是不写代码的CTO了,让真正想学习些代码的灰常着急. 俗话说高手在民间,没过多久就有大神把文档和0.7的破解版发出来了.但是下午,微信就发布了0.9版本,封杀了之前破解的.经过大神们的不懈努力,0

微信小程序开发(1) 天气预报

本文介绍如何使用微信小程序开发天气预报功能. 一.项目文件列表二.小程序配置使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBack

微信小程序开发(2) 计算器

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发(5) 2048游戏

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

《微信小程序开发入门精要》——第1章，第1.6节开发第一个微信小程序

1.6 开发第一个微信小程序本节将从零开始开发一款微信小程序.该程序是一个猜拳游戏,功能很简单,单击"开始"按钮后,会快速切换"锤子""剪刀"和"布",直到按"停止"按钮,会显示"锤子""剪刀"和"布"中的一个,该游戏可以实现双方或多方猜拳.本节的目的是通过该例子,将开发微信小程序的过程完整讲述一遍,从配置开发环境.建立小程序项目,一直到将微信小

微信小程序开发入门教程

在这篇微信小程序开发教程中,我们将向你介绍快速试用和体验微信小程序开发工具和官方示例Demo. 本系列教程将引导你完成如下任务: 下载微信web开发者工具和小程序官方Demo. 添加小程序示例Demo到项目体验小程序常用组件及接口第一部分下载开发者工具和官方Demo 微信小程序开发者工具为了帮助开发者简单和高效地开发微信小程序,微信官方推出了全新的微信小程序开发者工具,该工具集成了开发调试.代码编辑及程序发布等功能. 下载地址为 windows 64 . windows 32

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换_javascript技巧

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

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

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

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

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