2. 程式人生 > 程式設計 >微信小程式實現視訊播放器傳送彈幕

微信小程式實現視訊播放器傳送彈幕

阿新 • • 發佈：2021-04-25

本文例項為大家分享了微信小程式實現視訊播放器傳送彈幕的具體程式碼，供大家參考，具體內容如下

一、視訊播放器

  • 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.logwww.cppcns.com(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號青銅色 ',{ 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: ' 橙色 ',]

  },/**
   * 生命週期函式--監聽頁面載入
   */
  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
      }
    })
  }

})

四、頁面實現效果

微信小程式實現視訊播放器傳送彈幕

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

微信小程式實現視訊播放器傳送彈幕

本文例項為大家分享了微信小程式實現視訊播放器傳送彈幕的具體程式碼，供大家參考，具體內容如下

微信小程式使用視訊播放器video元件

本文例項為大家分享了微信小程式使用視訊播放器video元件的具體程式碼，供大家參考，具體內容如下

微信小程式實現自動播放視訊模仿gif動圖效果例項

需求背景： 在小程式頁面插入gif動態圖，但gif圖一般體積比較大，轉而用自動播放視訊的模式來模擬gif圖的效果，豐富頁面展示。自動播放的視訊，無控制條，無聲音，自動迴圈播放。

微信小程式：音樂播放器

音樂資源使用的是QQ音樂資源。圖片資源使用的網易雲音樂的專輯圖片。 HTML：

微信小程式實現音樂播放頁面佈局

本文例項為大家分享了微信小程式實現音樂播放頁面的佈局，供大家參考，具體內容如下

微信小程式實現滾動視訊自動播放（未優化）

先看看大概效果 1.首先需要了解微信API： wx.createIntersectionObserver(Object component, Object options)

微信小程式實現當前頁面多個視訊檔案只播放一個視訊

微信小程式實現當前頁面多個視訊檔案只播放一個視訊 <video src=\"{{item.url}}\" id=\"myVideo{{index}}\"data-index=\'{{index}}\' bindplay=\"videoPlay\" ></video>

微信小程式實現音訊檔案播放進度的例項程式碼

問題描述 在微信小程式中經常會用到控制檔案播放的滑塊，通過滑塊可控制音訊播放進度，下面即用程式碼實現。

微信小程式實現抖音播放效果的例項程式碼

最近專案要做一個類似於抖音的一個視訊播放 需要小程式完成 在再次確定了需要這個需求的情況下就開始了（其實因為不是說這個功能不好做主要是但心做出來肯定不流暢 卡頓什麼的 優化不好優化）

微信小程式實現文字語音播放

1：登入微信服務平臺 https://fuwu.weixin.qq.com/search?tab=3&type=&serviceType=3&page=1#search-page

微信小程式實現吸頂特效

本文例項為大家分享了微信小程式實現吸頂特效的具體程式碼，供大家參考，具體內容如下

微信小程式實現吸頂效果

最開始的時候，在小程式中實現吸頂效果，開發工具看起來還挺好的，但是在真機上就會有問題了。 原因是我不停的去 setData 會導致操作反饋延遲嚴重，無法及時將操作處理結果及時傳遞到檢視層。

微信小程式實現二維碼簽到考勤系統

一。手動生成二維碼的.js程式碼 這裡要引入一個官方文件wxapp.qrcode.min.js let drawQrcode = require(\'../utils/wxapp.qrcode.min.js\');//引入wxapp.qrcode.min.js檔案

微信小程式實現同時上傳多張圖片

本文例項為大家分享了微信小程式實現同時上傳多張圖片的具體程式碼，供大家參考，具體內容如下

微信小程式實現上傳多個檔案 超過10個

本文例項為大家分享了微信小程式實現上傳多個檔案超過10個的具體程式碼，供大家參考，具體內容如下

微信小程式實現樹莓派（raspberry pi）小車控制

本文是基於上一篇“網頁版樹莓派小車控制程式”改造而成。主要也練習了一下微信小程式的開發。這裡簡單記錄一下主要程式碼片段。也是趟過了許多的坑，例如：微信小程式不支援完全全屏，微信小程式不能橫屏展示。所以

微信小程式實現限制使用者轉發功能的例項程式碼

在上篇文章給大家提到微信小程式實現禁止分享程式碼例項，感興趣的朋友可以點選查閱。今天繼續給大家分享微信小程式實現限制使用者轉發功能，一起看看吧！

微信小程式實現錄製、試聽、上傳音訊功能（帶波形圖）

最近接到這樣一個需求，要求實現錄製、試聽、上傳音訊功能，選擇的是getBackgroundAudioManager,聲音錄製和播放波形圖是用css實現的，效果圖及詳細設計程式碼如下：

微信小程式實現下滑到底部自動翻頁功能

前言 這段時間接了一個微信小程式專案，從此開啟小程式的新世界大門。然後發現使用頁碼進行翻頁已經不適用於手機app，我們日常中實用的手機app或者小程式進行翻頁一般都是使用底部後下拉的方式。

微信小程式實現比較功能的方法彙總(五種方法)

首先在index.wxml頁面寫一個測試頁面 如圖： 程式碼如下 接下來就是比較功能的實現