WeChat applet implements video player sending bullet screen

This article shares the specific code for WeChat applet to implement video player sending barrage for your reference. The specific content is as follows

1. Video Player

video-detail Video player
select-color send barrage

1. Page creation

2. Select the color of the bullet screen

3. Use of Video plugin

4. Related Code

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": "Video Player",
    "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;
}

2. Video-detail video player related page code

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>
    <!--Bullet screen-->
    <view class="danmu">
        <view class="danmu-input">
            <input class="weui-input" type="text" placeholder="Please enter the bullet screen" bindblur="bindInputblur"/>
        </view>
        <view class="danmu-btn">
            <button type="primary" bindtap = "bindSendDanmu">Send Danmu</button>
        </view>
        <view class="danmu-color">
            <view class="danmu-color-switch">
                <view class="weui-cell-bd">Random color</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">Select color</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;
}
/*Play small icon*/
.playImg{
  position: absolute;
  top: 46%;
  left:46%;
  width:64rpx;
  height: 64rpx;
}
/*Bullet screen*/
.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 both ends*/
  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({

  /**
   * Initial data of the page */
  data: {
    current_id:'', //currently playing video 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: 'The red bullet screen that appears in the first second',
        color: '#ff0000',
        time: 1
      },
      {
        text: 'The green bullet screen that appears in the second second',
        color: '#00ff00',
        time: 2
      },
      
    ],
    isRandomColor: true, //Default random numberColor: "#ff0000", //Default red inputValue: "", //Text box input content},

  /**
   * Life cycle function--listen for page loading*/
  onLoad: function (options) {
    
  },  
  /**
   * Life cycle function--monitor page display*/
  onShow: function(){
    if (wx.getStorageSync('color')) {
      this.setData({
        numberColor: wx.getStorageSync('color')
      })
    }
  },
  /**
   * Life cycle function - listen for the completion of the initial rendering of the page*/
  onReady: function () {
    this.videoContext = wx.createVideoContext("videoId")
  },
  //Video list click event 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()
  },
  //Text box loses focus event bindInputblur: function(e){
    // console.log(e.detail.value)
    this.data.inputValue = e.detail.value
  },
  //Send the content of the bullet screen bindSendDanmu : function (e) {
    //Set the barrage color var color=""
    if(this.data.isRandomColor){//Random color color = this.getRandomColor()
    }else{
      color = this.data.numberColor
    }
    //Send Danmuthis.videoContext.sendDanmu({
      text: this.data.inputValue,
      color:color
    })
  },
  //Set random 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 switch event switchChange: function(e){
    console.log(e)
    this.data.isRandomColor = e.detail.value

  },
  //Select color selectColor:function(){
    wx.navigateTo({
      url: '/pages/select-color/select-color'
    })
  }
})

3. select-color sends barrage related page code

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({

  /**
   * Initial data of the page */
  data: {
    colorItems:[
      { key: 1, color: 'white', number: '#FFFFFF' },

      { key: 2, color: 'red', number: '#FF0000' },

      { key: 3, color: 'green', number: '#00FF00' },

      { key: 4, color: 'blue', number: '#0000FF' },

      { key: 5, color: 'Peony Red', number: '#FF00FF' },

      { key: 6, color: 'cyan', number: '#00FFFF' },

      { key: 7, color: 'yellow', number: '#FFFF00' },

      { key: 8, color: 'black', number: '#000000' },

      { key: 9, color: 'sea blue', number: '#70DB93' },

      { key: 10, color: 'Chocolate', number: '#5C3317' },

      { key: 11, color: 'blue purple', number: '#9F5F9F' },

      { key: 12, color: 'Brass', number: '#B5A642' },

      { key: 13, color: 'bright gold', number: '#D9D919' },

      { key: 14, color: 'brown', number: '#A67D3D' },

      { key: 15, color: 'Bronze', number: '#8C7853' },

      { key: 16, color: ' Bronze No. 2', number: '#A67D3D' },

      { key: 17, color: 'NCO blue', number: '#5F9F9F' },

      { key: 18, color: 'cold copper', number: '#D98719' },

      { key: 19, color: 'copper', number: '#B87333' },

      { key: 20, color: 'Coral Red', number: '#FF7F00' },

      { key: 21, color: 'purple blue', number: '#42426F' },

      { key: 22, color: 'dark brown', number: '#5C4033' },

      { key: 23, color: 'dark green', number: '#2F4F2F' },

      { key: 24, color: 'Dark copper green', number: '#4A766E' },

      { key: 25, color: 'Dark olive green', number: '#4F4F2F' },

      { key: 26, color: 'Dark orchid', number: '#9932CD' },

      { key: 27, color: 'dark purple', number: '#871F78' },

      { key: 28, color: 'Dark Slate Blue', number: '#6B238E' },

      { key: 29, color: 'Dark lead gray', number: '#2F4F4F' },

      { key: 30, color: 'dark brown', number: '#97694F' },

      { key: 32, color: 'dark turquoise', number: '#7093DB' },

      { key: 33, color: 'Dark Wood', number: '#855E42' },

      { key: 34, color: 'light gray', number: '#545454' },

      { key: 35, color: 'Dust-gray rose red', number: '#856363' },

      { key: 36, color: 'Feldspar', number: '#D19275' },

      { key: 37, color: 'fire brick color', number: '#8E2323' },

      { key: 38, color: 'Forest Green', number: '#238E23' },

      { key: 39, color: 'gold', number: '#CD7F32' },

      { key: 40, color: 'bright yellow', number: '#DBDB70' },

      { key: 41, color: 'grey', number: '#C0C0C0' },

      { key: 42, color: 'copper green', number: '#527F76' },

      { key: 43, color: 'cyan yellow', number: '#93DB70' },

      { key: 44, color: 'Hunter Green', number: '#215E21' },

      { key: 45, color: 'Indian Red', number: '#4E2F2F' },

      { key: 46, color: 'khaki', number: '#9F9F5F' },

      { key: 47, color: 'light blue', number: '#C0D9D9' },

      { key: 48, color: 'light grey', number: '#A8A8A8' },

      { key: 49, color: 'Light Steel Blue', number: '#8F8FBD' },

      { key: 59, color: 'Light wood', number: '#E9C2A6' },

      { key: 60, color: 'lime green', number: '#32CD32' },

      { key: 61, color: 'orange', number: '#E47833' },

      { key: 62, color: 'maroon', number: '#8E236B' },

      { key: 63, color: 'Mid-sea blue', number: '#32CD99' },

      { key: 64, color: 'medium blue', number: '#3232CD' },

      { key: 65, color: 'Medium Forest Green', number: '#6B8E23' },

      { key: 66, color: 'medium bright yellow', number: '#EAEAAE' },

      { key: 67, color: 'medium orchid', number: '#9370DB' },

      { key: 68, color: 'Medium sea green', number: '#426F42' },

      { key: 69, color: 'Medium Slate Blue', number: '#7F00FF' },

      { key: 70, color: 'medium spring green', number: '#7FFF00' },

      { key: 71, color: 'Medium Turquoise', number: '#70DBDB' },

      { key: 72, color: 'medium purple', number: '#DB7093' },

      { key: 73, color: 'Medium wood color', number: '#A68064' },

      { key: 74, color: 'dark navy', number: '#2F2F4F' },

      { key: 75, color: 'Navy Blue', number: '#23238E' },

      { key: 76, color: 'Neon Basket', number: '#4D4DFF' },

      { key: 77, color: 'Neon Pink', number: '#FF6EC7' },

      { key: 78, color: 'New dark blue', number: '#00009C' },

      { key: 79, color: 'New Tan', number: '#EBC79E' },

      { key: 80, color: 'dark golden yellow', number: '#CFB53B' },

      { key: 81, color: 'orange', number: '#FF7F00' },
    ]

  },

  /**
   * Life cycle function--listen for page loading*/
  onLoad: function (options) {

  },

  /**
   * Life cycle function - listen for the completion of the initial rendering of the page*/
  onReady: function () {

  },
  //Click to select a color selectColor(e){
    console.log(e)
    let number = e.currentTarget.dataset.number
    //Stored locally wx.setStorageSync('color', number)
    //Return to the previous page wx.navigateBack({
      delta: 1, // delta before rollback (default is 1) Page success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }

})

4. Page Implementation Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat applet development video player Video barrage barrage color customization example
The video in WeChat applet implements custom play button, cover image, and video cover text
WeChat applet uses the video component to play video function example [with source code download]
WeChat Mini Program video detailed explanation and simple examples
Detailed explanation of the WeChat applet video component
WeChat Mini Program Video API Example Detailed Explanation
WeChat applet video component detailed explanation and example code
WeChat applet uses the video player video component

<<: How to install Maven automatically in Linux continuous integration

>>: Solution to mysql login warning problem