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

本文实例为大家分享了微信小程序实现视频播放器发送弹幕的具体代码,供大家参考,具体内容如下

一、视频播放器

  • 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

/**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" style="background-color: {{numberColor}};"></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.js
Page({

  /**
   * 页面的初始数据
   */
  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" style="background: {{item.number}};"></view>
                </view>
            </block>
        </view>
    </view>
</view>

select-color.wxss

/* pages/select-color/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.js
Page({

  /**
   * 页面的初始数据
   */
  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
      }
    })
  }

})

四、页面实现效果

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

(0)

相关推荐

  • 微信小程序使用video组件播放视频功能示例【附源码下载】

    本文实例讲述了微信小程序使用video组件播放视频功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video> ② index.js Page({ data:{ // text:"这是一个页面" }, vide

  • 微信小程序 video详解及简单实例

    微信小程序 video详解 在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!! 视频上传部分代码: 视频播放 随机颜色的产生: 颜色页面的选择: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用来完成封面上的文字,设置绝对定位,水平垂直居中,在播放按钮上添加点击事件,点击之后隐藏cover-view,最后在监听视频结束事件,重新填充封面跟播放按钮就可以了. 代码: <video id="myVideo" src="{{videoSrc}}" enable-d

  • 微信小程序 Video API实例详解

    电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath文档写的有点问题. 主要属性: wx.chooseVideo(object) 成功之后返回参数 wxml <button type="primary" bindtap="listenerBtnOpenVideo">打开视频</button> <!--默认视频组件是隐藏的-

  • 微信小程序 video组件详解及实例代码

    视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton">点击显示视频组件</button> <!--视频组件src资源地址,binderror为监听错误信息--> <video src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4&q

  • 微信小程序使用视频播放器video组件

    本文实例为大家分享了微信小程序使用视频播放器video组件的具体代码,供大家参考,具体内容如下 在app.json中配置好页面路由和权限. 1.app.json { "pages":[ "pages/video/video" ], "permission": { "scope.writePhotosAlbum": { "desc": "读取相册" } } } 使用video组件 2.vi

  • 微信小程序 video组件详解

    主要属性: 效果图: ml: <View>1.播放网络视频</View> <view > <video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b72

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

    把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

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

    本文实例为大家分享了微信小程序实现视频播放器发送弹幕的具体代码,供大家参考,具体内容如下 一.视频播放器 video-detail 视频播放器 select-color 发送弹幕 1. 页面制作 2. 选择弹幕颜色 3. Video插件的使用 4. 相关代码 app.json //app.json { "pages":[ "pages/video-detail/video-detail", "pages/select-color/select-color&

  • mpvue微信小程序开发之实现一个弹幕评论

    先上图 就是一个简单的弹幕发送功能 弹幕区的页面: <div class="content" v-show="doommData.length"> <div class="textLeft"></div> <div class="textItem"> <p class="text aon" v-if="item.display" v-

  • 封装微信小程序http拦截器过程解析

    前言 微信小程序是数据驱动的应用,开发技术和vue.react和angular等mv*技术类似.在vue下可以用vue-resource.axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能. 第一步:创建一个request.js文件 第二步:确定http.upload和websocket前缀 第三步:封装wx.request 在请求发出前处理http地址.请求头和参数.

  • 微信小程序音乐播放器开发

    前言  这篇文章上一版本是用audio组件开发的播放器,随后反应音频加载速度慢的问题 又用小程序内置的背景音乐播放的方法写了一遍,逻辑是一样的逻辑,希望对大家有所帮助! <view class='audiosBox'> <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!isOpen}}"> <image class='image2' src=

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

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

  • 微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)

    微信小程序Server环境配置详解 主要内容: 1. SSL免费证书申请步骤 2. Nginx HTTPS 配置 3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请SSL证书 小程序也要求 TLS(传输层安全协议)的版本至少为 1.2,在配置好 https之后,如果 TLS 的版本较低,就涉及到升级问题 所以 Server端环境配置的主要步骤: 申请 SSL 证书 配置web服务器支持https(我使用的是nginx)

  • 微信小程序 Nginx环境配置详细介绍

    微信小程序Server环境配置详解 主要内容: 1. SSL免费证书申请步骤 2. Nginx HTTPS 配置 3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请SSL证书 小程序也要求 TLS(传输层安全协议)的版本至少为 1.2,在配置好 https之后,如果 TLS 的版本较低,就涉及到升级问题 所以 Server端环境配置的主要步骤: 申请 SSL 证书 配置web服务器支持https(我使用的是nginx)

  • 微信小程序视频弹幕发送功能的实现

    1. 目录结构 2. videoDanmu <!-- 视频区域 --> <video src="{{src}}" id='video' danmu-btn enable-danmu danmu-list="{{ danmuList }}" > </video> <!-- 弹幕发送区域 --> <view class='sendDanmu'> <textarea name="" id

随机推荐