微信小程序实现视频播放器发送弹幕的方法

这篇文章主要介绍了微信小程序实现视频播放器发送弹幕的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一、视频播放器

• video-detail 视频播放器

• select-color 发送弹幕

1. 页面制作

2. 选择弹幕颜色

3、 Video插件的使用

4. 相关代码

app.JSON

//app.json{  "pages":[    "pages/video-detail/video-detail",    "pages/select-color/select-color",    "pages/index/index",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "视频播放器",    "navigationBarTextStyle":"black"  },  "style": "v2",  "sitemapLocation": "sitemap.json"}

app.wxss

.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;}

二、video-detail 视频播放器相关页面代码

video-detail.wxml

<!--pages/video-detail/video-detail.wxml--><view class="mainContent">    <view class="mainList">        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id && current_id == videoDetail.id}}">            <view class="video">                <video class="videoContent" id="videoId" show-center-play-btn="true" autoplay="true"                    danmu-list="{{danmuList}}" danmu-btn enable-danmu                 src="{{videoDetail.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video>            </view>        </view>        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id =='' || current_id != videoDetail.id}}">            <view class="video">                <image class="playImg" src="/images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>                <image class="videoContent" src="{{videoDetail.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>            </view>        </view>    </view>    <!--弹幕-->    <view class="danmu">        <view class="danmu-input">            <input class="weui-input" type="text" placeholder="请输入弹幕" bindblur="bindInputblur"/>        </view>        <view class="danmu-btn">            <button type="primary" bindtap = "bindSendDanmu">发送弹幕</button>        </view>        <view class="danmu-color">            <view class="danmu-color-switch">                <view class="weui-cell-bd">随机颜色</view>                <view class="weui-cell-ft">                    <switch checked="true" type="switch" bindchange="switchChange"></switch>                </view>            </view>            <view class="danmu-color-select" bindtap = "selectColor">                <view class="weui-cell-bd">选择颜色</view>                <view class="weui-cell-ft">                    <view class="selectColor" ></view>                </view>            </view>        </view>    </view></view>

video-detail.wxss

.mainContent{  background: #ffffff;  overflow: auto;}.mainList{  width:100%;  background: #ffffff;  height: 396rpx;}.video{  width:94%;  height: 324rpx;  margin-left: 20rpx;  position: relative;}.videoContent{  width:100%;  height: 324rpx;}.playImg{  position: absolute;  top: 46%;  left:46%;  width:64rpx;  height: 64rpx;}.danmu{  width:100%;}.danmu-input{  width:100%;  height: 60rpx;}.weui-input{   display: flex;  width:94%;  height: 60rpx;  align-items: center;  margin-left: 20rpx;  border-radius: 8rpx;  border:2rpx solid #cccccc;  padding-left:10rpx;  font-size: 28rpx;}.danmu-btn{  width:100%;  margin-top: 20rpx;}.danmu-color{  width:100%;  margin-top: 20rpx;  border-top:2rpx solid #cccccc;}.danmu-color-switch,.danmu-color-select{  display: flex;  flex-direction: row;  justify-content: space-between;  align-items: center;  margin: 20rpx 20rpx 0 20rpx;}.weui-cell-bd{  font-size: 28rpx;}.weui-cell-ft{  font-size: 28rpx;}.selectColor{  width:80rpx;  height: 80rpx;  line-height: 100rpx;}

video-detail.js

// pages/video-detail/video-detail.jsPage({    data: {    current_id:'',//当前播放视频id    videoDetail:{      id:"1",      "videoUrl":"Http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4",      "poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"    },    //弹幕列表    danmuList:[      {        text: '第1s出现的红色弹幕',        color: '#ff0000',        time: 1      },      {        text: '第2s出现的绿色弹幕',        color: '#00ff00',        time: 2      },          ],    isRandomColor: true,// 默认随机    numberColor:"#ff0000",//默认红色    inputValue: "",//文本框输入内容       },    onLoad: function (options) {      },      onShow: function(){    if(wx.getStorageSync('color')){      this.setData({        numberColor: wx.getStorageSync('color')      })    }  },    onReady: function () {    this.videoContext = wx.createVideoContext("videoId")  },  //视频列表点击事件  videoPlay:function(e){    console.log(e)    var id= e.currentTarget.dataset.index    var currentId=e.currentTarget.id    this.setData({      current_id: currentId    })    var videoContext = wx.createVideoContext(id)    videoContext.play()  },  //文本框失去焦点事件  bindInputblur: function(e){    // console.log(e.detail.value)    this.data.inputValue = e.detail.value  },  //发送弹幕内容  bindSendDanmu : function(e){    //设置弹幕颜色    var color=""    if(this.data.isRandomColor){//随机颜色      color = this.getRandomColor()    }else{      color = this.data.numberColor    }    //发送弹幕    this.videoContext.sendDanmu({      text: this.data.inputValue,      color:color    })  },  //设置随机颜色  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('')  },  //switch开关切换事件  switchChange: function(e){    console.log(e)    this.data.isRandomColor = e.detail.value  },  //选择颜色  selectColor:function(){    wx.navigateTo({      url: '/pages/select-color/select-color'    })  }})

三、select-color 发送弹幕相关页面代码

select-color.wxml

<!--pages/select-color/select-color.wxml--><view class="page">    <view class="page_bd">        <view class="color-items">            <block wx:for="{{colorItems}}">                <view class="item" data-number="{{item.number}}" bindtap = "selectColor">                    <view class="item-icon" ></view>                </view>            </block>        </view>    </view></view>

select-color.wxss

.color-items{  border-top: 1rpx solid #d9d9d9;  border-left: 1rpx solid #d9d9d9;}.item{  position: relative;  float: left;  padding: 20rpx;   width: 20%;  box-sizing: border-box;  border-right: 1rpx solid #d9d9d9;  border-bottom: 1rpx solid #d9d9d9;}.item-icon{  display: block;  width:100rpx;  height: 100rpx;  margin: 0 auto;  box-shadow: 3px 3px 5px #bbbbbb;}

select-color.js

// pages/select-color/select-color.jsPage({    data: {    colorItems:[      { 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 (options) {  },    onReady: function () {  },  //点击，选中颜色  selectColor(e){    console.log(e)    let number =e.currentTarget.dataset.number    //存储在本地    wx.setStorageSync('color', number)    //返回上一页    wx.navigateBack({      delta: 1, // 回退前 delta(默认为1) 页面      success: function(res){        // success      },      fail: function() {        // fail      },      complete: function() {        // complete      }    })  }})

四、页面实现效果

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序实现视频播放器发送弹幕的方法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!