• 售前

  • 售后

热门帖子
入门百科

微信小步伐实现视频播放器发送弹幕

[复制链接]
同感丶 显示全部楼层 发表于 2021-10-26 14:04:24 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了微信小步伐实现视频播放器发送弹幕的具体代码,供大家参考,具体内容如下
一、视频播放器

       
  • video-detail 视频播放器   
  • select-color 发送弹幕
1. 页面制作

2. 选择弹幕颜色

3、 Video插件的利用

4. 相干代码
app.json
  1. //app.json
  2. {
  3.   "pages":[
  4.     "pages/video-detail/video-detail",
  5.     "pages/select-color/select-color",
  6.     "pages/index/index",
  7.     "pages/logs/logs"
  8.   ],
  9.   "window":{
  10.     "backgroundTextStyle":"light",
  11.     "navigationBarBackgroundColor": "#fff",
  12.     "navigationBarTitleText": "视频播放器",
  13.     "navigationBarTextStyle":"black"
  14.   },
  15.   "style": "v2",
  16.   "sitemapLocation": "sitemap.json"
  17. }
复制代码
app.wxss
  1. /**app.wxss**/
  2. .container {
  3.   height: 100%;
  4.   display: flex;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content: space-between;
  8.   padding: 200rpx 0;
  9.   box-sizing: border-box;
  10. }
复制代码
二、video-detail 视频播放器相干页面代码


video-detail.wxml
  1. <!--pages/video-detail/video-detail.wxml-->
  2. <view class="mainContent">
  3.     <view class="mainList">
  4.         <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id && current_id == videoDetail.id}}">
  5.             <view class="video">
  6.                 <video class="videoContent" id="videoId" show-center-play-btn="true" autoplay="true"
  7.                     danmu-list="{{danmuList}}" danmu-btn enable-danmu
  8.                  src="{{videoDetail.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video>
  9.             </view>
  10.         </view>
  11.         <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id =='' || current_id != videoDetail.id}}">
  12.             <view class="video">
  13.                 <image class="playImg" src="/images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
  14.                 <image class="videoContent" src="{{videoDetail.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
  15.             </view>
  16.         </view>
  17.     </view>
  18.     <!--弹幕-->
  19.     <view class="danmu">
  20.         <view class="danmu-input">
  21.             <input class="weui-input" type="text" placeholder="请输入弹幕" bindblur="bindInputblur"/>
  22.         </view>
  23.         <view class="danmu-btn">
  24.             <button type="primary" bindtap = "bindSendDanmu">发送弹幕</button>
  25.         </view>
  26.         <view class="danmu-color">
  27.             <view class="danmu-color-switch">
  28.                 <view class="weui-cell-bd">随机颜色</view>
  29.                 <view class="weui-cell-ft">
  30.                     <switch checked="true" type="switch" bindchange="switchChange"></switch>
  31.                 </view>
  32.             </view>
  33.             <view class="danmu-color-select" bindtap = "selectColor">
  34.                 <view class="weui-cell-bd">选择颜色</view>
  35.                 <view class="weui-cell-ft">
  36.                     <view class="selectColor" style="background-color: {{numberColor}};"></view>
  37.                 </view>
  38.             </view>
  39.         </view>
  40.     </view>
  41. </view>
复制代码
video-detail.wxss
  1. .mainContent{
  2.   background: #ffffff;
  3.   overflow: auto;
  4. }
  5. .mainList{
  6.   width:100%;
  7.   background: #ffffff;
  8.   height: 396rpx;
  9. }
  10. .video{
  11.   width:94%;
  12.   height: 324rpx;
  13.   margin-left: 20rpx;
  14.   position: relative;
  15. }
  16. .videoContent{
  17.   width:100%;
  18.   height: 324rpx;
  19. }
  20. /*播放小图标*/
  21. .playImg{
  22.   position: absolute;
  23.   top: 46%;
  24.   left:46%;
  25.   width:64rpx;
  26.   height: 64rpx;
  27. }
  28. /*弹幕*/
  29. .danmu{
  30.   width:100%;
  31. }
  32. .danmu-input{
  33.   width:100%;
  34.   height: 60rpx;
  35. }
  36. .weui-input{
  37.   display: flex;
  38.   width:94%;
  39.   height: 60rpx;
  40.   align-items: center;
  41.   margin-left: 20rpx;
  42.   border-radius: 8rpx;
  43.   border:2rpx solid #cccccc;
  44.   padding-left:10rpx;
  45.   font-size: 28rpx;
  46. }
  47. .danmu-btn{
  48.   width:100%;
  49.   margin-top: 20rpx;
  50. }
  51. .danmu-color{
  52.   width:100%;
  53.   margin-top: 20rpx;
  54.   border-top:2rpx solid #cccccc;
  55. }
  56. .danmu-color-switch,.danmu-color-select{
  57.   display: flex;
  58.   flex-direction: row;
  59.   justify-content: space-between;/*两端对齐*/
  60.   align-items: center;
  61.   margin: 20rpx 20rpx 0 20rpx;
  62. }
  63. .weui-cell-bd{
  64.   font-size: 28rpx;
  65. }
  66. .weui-cell-ft{
  67.   font-size: 28rpx;
  68. }
  69. .selectColor{
  70.   width:80rpx;
  71.   height: 80rpx;
  72.   line-height: 100rpx;
  73. }
复制代码
video-detail.js
  1. // pages/video-detail/video-detail.js
  2. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     current_id:'',//当前播放视频id
  8.     videoDetail:{
  9.       id:"1",
  10.       "videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4",
  11.       "poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"
  12.     },
  13.     //弹幕列表
  14.     danmuList:[
  15.       {
  16.         text: '第1s出现的红色弹幕',
  17.         color: '#ff0000',
  18.         time: 1
  19.       },
  20.       {
  21.         text: '第2s出现的绿色弹幕',
  22.         color: '#00ff00',
  23.         time: 2
  24.       },
  25.       
  26.     ],
  27.     isRandomColor: true,// 默认随机
  28.     numberColor:"#ff0000",//默认红色
  29.     inputValue: "",//文本框输入内容
  30.      
  31.   },
  32.   /**
  33.    * 生命周期函数--监听页面加载
  34.    */
  35.   onLoad: function (options) {
  36.    
  37.   },  
  38.   /**
  39.    * 生命周期函数--监听页面显示
  40.    */
  41.   onShow: function(){
  42.     if(wx.getStorageSync('color')){
  43.       this.setData({
  44.         numberColor: wx.getStorageSync('color')
  45.       })
  46.     }
  47.   },
  48.   /**
  49.    * 生命周期函数--监听页面初次渲染完成
  50.    */
  51.   onReady: function () {
  52.     this.videoContext = wx.createVideoContext("videoId")
  53.   },
  54.   //视频列表点击事件
  55.   videoPlay:function(e){
  56.     console.log(e)
  57.     var id= e.currentTarget.dataset.index
  58.     var currentId=e.currentTarget.id
  59.     this.setData({
  60.       current_id: currentId
  61.     })
  62.     var videoContext = wx.createVideoContext(id)
  63.     videoContext.play()
  64.   },
  65.   //文本框失去焦点事件
  66.   bindInputblur: function(e){
  67.     // console.log(e.detail.value)
  68.     this.data.inputValue = e.detail.value
  69.   },
  70.   //发送弹幕内容
  71.   bindSendDanmu : function(e){
  72.     //设置弹幕颜色
  73.     var color=""
  74.     if(this.data.isRandomColor){//随机颜色
  75.       color = this.getRandomColor()
  76.     }else{
  77.       color = this.data.numberColor
  78.     }
  79.     //发送弹幕
  80.     this.videoContext.sendDanmu({
  81.       text: this.data.inputValue,
  82.       color:color
  83.     })
  84.   },
  85.   //设置随机颜色
  86.   getRandomColor(){
  87.     let rgb = []
  88.     for(let i=0;i<3;++i){
  89.       let color = Math.floor(Math.random() * 256).toString(16)
  90.       color = color.length == 1 ? '0' + color : color
  91.       rgb.push(color)
  92.     }
  93.     return '#' + rgb.join('')
  94.   },
  95.   //switch开关切换事件
  96.   switchChange: function(e){
  97.     console.log(e)
  98.     this.data.isRandomColor = e.detail.value
  99.   },
  100.   //选择颜色
  101.   selectColor:function(){
  102.     wx.navigateTo({
  103.       url: '/pages/select-color/select-color'
  104.     })
  105.   }
  106. })
复制代码
三、select-color 发送弹幕相干页面代码


select-color.wxml
  1. <!--pages/select-color/select-color.wxml-->
  2. <view class="page">
  3.     <view class="page_bd">
  4.         <view class="color-items">
  5.             <block wx:for="{{colorItems}}">
  6.                 <view class="item" data-number="{{item.number}}" bindtap = "selectColor">
  7.                     <view class="item-icon" style="background: {{item.number}};"></view>
  8.                 </view>
  9.             </block>
  10.         </view>
  11.     </view>
  12. </view>
复制代码
select-color.wxss
  1. /* pages/select-color/select-color.wxss */
  2. .color-items{
  3.   border-top: 1rpx solid #d9d9d9;
  4.   border-left: 1rpx solid #d9d9d9;
  5. }
  6. .item{
  7.   position: relative;
  8.   float: left;
  9.   padding: 20rpx;
  10.   width: 20%;
  11.   box-sizing: border-box;
  12.   border-right: 1rpx solid #d9d9d9;
  13.   border-bottom: 1rpx solid #d9d9d9;
  14. }
  15. .item-icon{
  16.   display: block;
  17.   width:100rpx;
  18.   height: 100rpx;
  19.   margin: 0 auto;
  20.   box-shadow: 3px 3px 5px #bbbbbb;
  21. }
复制代码
select-color.js
  1. // pages/select-color/select-color.js
  2. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     colorItems:[
  8.       { key: 1, color: ' 白色 ', number: '#FFFFFF' },
  9.       { key: 2, color: ' 红色 ', number: '#FF0000' },
  10.       { key: 3, color: ' 绿色 ', number: '#00FF00' },
  11.       { key: 4, color: ' 蓝色 ', number: '#0000FF' },
  12.       { key: 5, color: ' 牡丹红 ', number: '#FF00FF' },
  13.       { key: 6, color: ' 青色 ', number: '#00FFFF' },
  14.       { key: 7, color: ' 黄色 ', number: '#FFFF00' },
  15.       { key: 8, color: ' 黑色 ', number: '#000000' },
  16.       { key: 9, color: ' 海蓝 ', number: '#70DB93' },
  17.       { key: 10, color: ' 巧克力色 ', number: '#5C3317' },
  18.       { key: 11, color: ' 蓝紫色 ', number: '#9F5F9F' },
  19.       { key: 12, color: ' 黄铜色 ', number: '#B5A642' },
  20.       { key: 13, color: ' 亮金色 ', number: '#D9D919' },
  21.       { key: 14, color: ' 棕色 ', number: '#A67D3D' },
  22.       { key: 15, color: ' 青铜色 ', number: '#8C7853' },
  23.       { key: 16, color: ' 2号青铜色 ', number: '#A67D3D' },
  24.       { key: 17, color: ' 士官服蓝色 ', number: '#5F9F9F' },
  25.       { key: 18, color: ' 冷铜色 ', number: '#D98719' },
  26.       { key: 19, color: ' 铜色 ', number: '#B87333' },
  27.       { key: 20, color: ' 珊瑚红 ', number: '#FF7F00' },
  28.       { key: 21, color: ' 紫蓝色 ', number: '#42426F' },
  29.       { key: 22, color: ' 深棕 ', number: '#5C4033' },
  30.       { key: 23, color: ' 深绿 ', number: '#2F4F2F' },
  31.       { key: 24, color: ' 深铜绿色 ', number: '#4A766E' },
  32.       { key: 25, color: ' 深橄榄绿 ', number: '#4F4F2F' },
  33.       { key: 26, color: ' 深兰花色 ', number: '#9932CD' },
  34.       { key: 27, color: ' 深紫色 ', number: '#871F78' },
  35.       { key: 28, color: ' 深石板蓝 ', number: '#6B238E' },
  36.       { key: 29, color: ' 深铅灰色 ', number: '#2F4F4F' },
  37.       { key: 30, color: ' 深棕褐色 ', number: '#97694F' },
  38.       { key: 32, color: ' 深绿松石色 ', number: '#7093DB' },
  39.       { key: 33, color: ' 暗木色 ', number: '#855E42' },
  40.       { key: 34, color: ' 淡灰色 ', number: '#545454' },
  41.       { key: 35, color: ' 土灰玫瑰红色 ', number: '#856363' },
  42.       { key: 36, color: ' 长石色 ', number: '#D19275' },
  43.       { key: 37, color: ' 火砖色 ', number: '#8E2323' },
  44.       { key: 38, color: ' 森林绿 ', number: '#238E23' },
  45.       { key: 39, color: ' 金色 ', number: '#CD7F32' },
  46.       { key: 40, color: ' 鲜黄色 ', number: '#DBDB70' },
  47.       { key: 41, color: ' 灰色 ', number: '#C0C0C0' },
  48.       { key: 42, color: ' 铜绿色 ', number: '#527F76' },
  49.       { key: 43, color: ' 青黄色 ', number: '#93DB70' },
  50.       { key: 44, color: ' 猎人绿 ', number: '#215E21' },
  51.       { key: 45, color: ' 印度红 ', number: '#4E2F2F' },
  52.       { key: 46, color: ' 土黄色 ', number: '#9F9F5F' },
  53.       { key: 47, color: ' 浅蓝色 ', number: '#C0D9D9' },
  54.       { key: 48, color: ' 浅灰色 ', number: '#A8A8A8' },
  55.       { key: 49, color: ' 浅钢蓝色 ', number: '#8F8FBD' },
  56.       { key: 59, color: ' 浅木色 ', number: '#E9C2A6' },
  57.       { key: 60, color: ' 石灰绿色 ', number: '#32CD32' },
  58.       { key: 61, color: ' 桔黄色 ', number: '#E47833' },
  59.       { key: 62, color: ' 褐红色 ', number: '#8E236B' },
  60.       { key: 63, color: ' 中海蓝色 ', number: '#32CD99' },
  61.       { key: 64, color: ' 中蓝色 ', number: '#3232CD' },
  62.       { key: 65, color: ' 中森林绿 ', number: '#6B8E23' },
  63.       { key: 66, color: ' 中鲜黄色 ', number: '#EAEAAE' },
  64.       { key: 67, color: ' 中兰花色 ', number: '#9370DB' },
  65.       { key: 68, color: ' 中海绿色 ', number: '#426F42' },
  66.       { key: 69, color: ' 中石板蓝色 ', number: '#7F00FF' },
  67.       { key: 70, color: ' 中春绿色 ', number: '#7FFF00' },
  68.       { key: 71, color: ' 中绿松石色 ', number: '#70DBDB' },
  69.       { key: 72, color: ' 中紫红色 ', number: '#DB7093' },
  70.       { key: 73, color: ' 中木色 ', number: '#A68064' },
  71.       { key: 74, color: ' 深藏青色 ', number: '#2F2F4F' },
  72.       { key: 75, color: ' 海军蓝 ', number: '#23238E' },
  73.       { key: 76, color: ' 霓虹篮 ', number: '#4D4DFF' },
  74.       { key: 77, color: ' 霓虹粉红 ', number: '#FF6EC7' },
  75.       { key: 78, color: ' 新深藏青色 ', number: '#00009C' },
  76.       { key: 79, color: ' 新棕褐色 ', number: '#EBC79E' },
  77.       { key: 80, color: ' 暗金黄色 ', number: '#CFB53B' },
  78.       { key: 81, color: ' 橙色 ', number: '#FF7F00' },
  79.     ]
  80.   },
  81.   /**
  82.    * 生命周期函数--监听页面加载
  83.    */
  84.   onLoad: function (options) {
  85.   },
  86.   /**
  87.    * 生命周期函数--监听页面初次渲染完成
  88.    */
  89.   onReady: function () {
  90.   },
  91.   //点击,选中颜色
  92.   selectColor(e){
  93.     console.log(e)
  94.     let number =e.currentTarget.dataset.number
  95.     //存储在本地
  96.     wx.setStorageSync('color', number)
  97.     //返回上一页
  98.     wx.navigateBack({
  99.       delta: 1, // 回退前 delta(默认为1) 页面
  100.       success: function(res){
  101.         // success
  102.       },
  103.       fail: function() {
  104.         // fail
  105.       },
  106.       complete: function() {
  107.         // complete
  108.       }
  109.     })
  110.   }
  111. })
复制代码
四、页面实现效果


以上就是本文的全部内容,渴望对大家的学习有所资助,也渴望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作